/* Design tokens (colour, type, spacing, radii, elevation, motion) live in tokens.css —
   the single source of truth, loaded before this file in index.html. This file is
   component rules only; everything below references a token from there. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* GOBIMANS-202: icon sprite. `.icon` renders a <use> ref into the #i-* symbols defined in
   index.html. Sized in em so it tracks the font-size of whatever badge/button/nav-item it
   sits in (mirrors how the old text glyphs scaled); currentColor so it always inherits the
   surrounding text color instead of a hardcoded fill. */
.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Type tokens (--font-ui Geologica, --font-logo Bricolage wordmark, tracking + type scale)
   live in tokens.css — single source of truth. */

/* GOBIMANS wordmark — typographic logo, accent A carries the colour (terra on light, orange on colour) */
.brandmark { font-family: var(--font-logo); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.brandmark__a { color: var(--terra); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--parch);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: var(--tk-tight);
  touch-action: manipulation;   /* kill the 300ms tap delay on touch */
}
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Type hierarchy ----------
   One family, hierarchy by weight + optical tracking. Large display headings set tight;
   mid headings a touch tight; all numeric data uses tabular lining figures so columns align. */
.home__title, .eh__name, .dlg__title, .vhead__t, .gate__title {
  letter-spacing: var(--tk-display); font-weight: 800; line-height: 1.04;
}
.picker__name, .section__no, .hpanel__t, .htile__k, .tcard__name, .tcard__logo--mono, .vtab {
  letter-spacing: var(--tk-head);
}
/* metrics — tabular lining figures, tightened, heavier so the number leads the card */
.htile__n, .htile__big, .htile__big i, .finsum__c b, .calrow__date b, .hstat b,
.picker__ipct, .tcard__ppl, .due, .pincode {
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
.htile__n, .htile__big { font-weight: 800; letter-spacing: -0.018em; }
.finsum__c b, .calrow__date b { font-weight: 800; letter-spacing: -0.012em; }

/* ---------- Gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, var(--parch-2), var(--parch));
  padding: 24px;
}
.gate__card {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--e-3);
  padding: 32px 28px;
  text-align: center;
}
.gate__mark { display: block; font-size: 30px; color: var(--ink); margin: 0 auto 6px; }
.gate__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: 600; margin: 16px 0 4px;
}
.gate__sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.gate__input {
  width: 100%; text-align: center; letter-spacing: .3em;
  padding: 12px; font-size: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--parch); margin-bottom: 14px;
}
.gate__input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.gate__btn { width: 100%; }
.gate__err { color: var(--u-hot); font-size: 13px; margin: 12px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: var(--r-pill);   /* Ventriloc pill */
  font-size: 14px; font-weight: 600;
  transition: background .12s, border-color .12s, transform .04s;
}
.btn:active { transform: translateY(1px); }
/* GOBIMANS-357: a disabled action has to LOOK unavailable, not just refuse the click — the point
   of showing it at all is that the reason next to it becomes readable. */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* Ventriloc: filled action is Carbon (orange is reserved for accents, never a button bg) */
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--parch); }
/* GOBIMANS-364: derive the hover from the token pair instead of a literal. The literal was a
   light-theme-only assumption: in dark, --ink is near-white and --parch is near-black, so a fixed
   dark #353535 background left the label (--parch) dark-on-dark at ~1.3:1 — the caption vanished
   on the app's main button. Mixing toward --parch darkens in light and lightens in dark, which is
   what "a bit more pressed than the base" actually means in both. */
.btn--primary:hover { background: color-mix(in oklch, var(--ink) 85%, var(--parch)); border-color: color-mix(in oklch, var(--ink) 85%, var(--parch)); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--parch-2); }
.btn--chip { padding: 7px 12px; font-size: 13px; border-radius: 999px; }
.btn--chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--parch); }
.btn--muted { color: var(--muted); }

/* GOBIMANS-120: inline target-project picker next to the Duplicate button */
.dup-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dup-target { max-width: 160px; }

.brand { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.brand__mark { font-size: 19px; color: var(--parch); }
.brand__mark .brandmark__a { color: var(--orange); }
.brand__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-2); }
@media (max-width: 1620px) { .brand__sub { display: none; } }   /* decorative — drop it well before the bar gets tight */

/* ---------- Event picker (dropdown) ---------- */
.picker { position: relative; flex: 0 0 auto; min-width: 0; }
.picker__btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: var(--parch); font-weight: 600; font-size: 14px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.picker__btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); }
/* GOBIMANS-327: верхний переключатель обрезал «Nebessa — ию…» на 170px. Потолок поднят и задан
   в ch — он следует за размером шрифта, а не за случайным числом пикселей; на узких экранах
   мобильное правило (max-width: 33vw) по-прежнему выигрывает, оно объявлено ниже. */
.picker__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.picker__chev { color: var(--parch); opacity: .7; flex: 0 0 auto; transition: transform var(--t-base) var(--ease); }
.picker.is-open .picker__chev { transform: rotate(180deg); }

.picker__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: max(280px, 100%); max-width: min(86vw, 360px);
  max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e-3); padding: 6px;
  animation: pop-in var(--t-base) var(--ease);
}
.picker__group { padding: 9px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.picker__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: var(--radius-sm);
  text-align: left; color: var(--ink); font-weight: 600; font-size: 14px;
  transition: background var(--t-fast) var(--ease);
}
.picker__item:hover { background: var(--parch-2); }
/* GOBIMANS-374: --bronze как ЦВЕТ ТЕКСТА даёт 2.80:1 на светлом — ниже AA даже для крупного.
   Для этого и заведён --bronze-ink (5.21:1). В рамках, фокус-кольцах, accent-color и на тёмном
   рельсе --bronze остаётся: там он не текст. */
.picker__check { width: 16px; flex: 0 0 auto; color: var(--bronze-ink); font-weight: 700; text-align: center; }
.picker__item.is-active { background: var(--parch-2); }
.picker__iname { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker__item--tmpl .picker__iname { font-style: italic; color: var(--ink-2); }
.picker__ipct { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; width: 30px; text-align: right; font-weight: 600; }
.picker__row { display: flex; align-items: center; gap: 2px; }
.picker__row .picker__item { flex: 1 1 auto; min-width: 0; }
.picker__star {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  padding: 9px 10px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1;
  color: var(--muted); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.picker__star:hover { background: var(--parch-2); color: var(--bronze-ink); }
.picker__star.is-pinned { color: var(--bronze-ink); }
.picker__sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.picker__add { color: var(--bronze-ink); }
.picker__add .picker__check { color: var(--bronze-ink); }
.picker__add:hover { background: var(--parch-3); }

/* ---------- Event head ---------- */
.eventhead {
  padding: 12px 16px 4px;   /* GOBIMANS-349: шапка ужата — работа начинается выше */
  max-width: var(--content-max); margin: 0 auto; width: 100%;
}
.eh__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.eh__name { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; margin: 0; }
/* GOBIMANS-349: .eh__crumb удалён вместе с разметкой — проект назван в H1, вид — активной вкладкой. */
.eh__meta { color: var(--muted); font-size: 14px; }
.eh__bar { margin-top: 8px; height: 8px; border-radius: 999px; background: var(--parch-3); overflow: hidden; display: flex; }
.eh__bar > span { display: block; height: 100%; }
/* GOBIMANS-330: .eh__legend удалён вместе с разметкой — числа переехали в title сегментов
   полосы и в её aria-label. */

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky; top: var(--topbar-h); z-index: 15;
  background: var(--parch);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 16px;   /* GOBIMANS-349 */
  max-width: var(--content-max); margin: 0 auto; width: 100%;
}
.search {
  width: 100%; padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 9px;
}
.search:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.toolbar__row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.toolbar__row--meta { margin-top: 9px; }
/* Board colour legend (GOBIMANS-252): static key for priority dots + due-date states, always
   visible with the toolbar (not tucked behind "Filters") since it's read reference, not a control. */
.selwrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.selwrap select { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); max-width: 190px; }

.fchip {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fchip:hover { border-color: var(--bronze-2); }
.fchip__dot { width: 9px; height: 9px; border-radius: 3px; }
.fchip.is-on { background: var(--ink); color: var(--surface); border-color: transparent; }
.fchip[data-status="backlog"].is-on { background: var(--s-backlog); }
.fchip[data-status="production"].is-on { background: var(--s-prod); color: var(--ink); }
.fchip[data-status="review"].is-on { background: var(--s-review); }
.fchip[data-status="approval"].is-on { background: var(--s-appr); }
.fchip[data-status="done"].is-on { background: var(--s-done); }
.fchip[data-status="none"].is-on { background: var(--s-none); color: var(--ink); }
.fchip__n { opacity: .65; font-weight: 500; }

/* ---------- Saved views (GOBIMANS-152) ---------- */
.views { position: relative; display: inline-flex; flex: 0 0 auto; }
#viewsBtn .chev { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.views.is-open #viewsBtn { background: var(--ink); border-color: var(--ink); color: var(--parch); }
.views.is-open #viewsBtn .chev { transform: rotate(180deg); }
.views__pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: max(240px, 100%); max-width: min(88vw, 320px);
  max-height: min(60vh, 380px); overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e-3); padding: 6px;
  animation: pop-in var(--t-base) var(--ease);
}
.views__item { display: flex; align-items: center; gap: 4px; }
.views__apply {
  flex: 1 1 auto; min-width: 0; display: block;
  padding: 9px 10px; border: none; background: none; border-radius: var(--radius-sm);
  text-align: left; color: var(--ink); font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--t-fast) var(--ease);
}
.views__apply:hover { background: var(--parch-2); }
.views__del {
  flex: 0 0 auto; width: 28px; height: 28px; border: none; background: none;
  border-radius: var(--radius-sm); color: var(--muted); font-size: 18px; line-height: 1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.views__del:hover { background: var(--parch-2); color: var(--terra, var(--ink)); }
.views__empty { padding: 12px 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.views__sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.views__save {
  display: block; width: 100%; padding: 9px 10px; border: none; background: none;
  border-radius: var(--radius-sm); text-align: left; color: var(--bronze-ink);
  font-weight: 600; font-size: 14px; transition: background var(--t-fast) var(--ease);
}
.views__save:hover { background: var(--parch-3); }

/* ---------- Board ---------- */
.board { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 8px 16px 96px; }

.section { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); }
.section__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; background: var(--parch-2);
  border: none; text-align: left; border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease);
}
.section__head:hover { background: var(--parch-3); }
.section.is-collapsed .section__head { border-bottom-color: transparent; }
.section__no { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--bronze-ink); min-width: 34px; }
.section__titles { flex: 1 1 auto; min-width: 0; }
.section__en { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.section__prog { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.section__chev { color: var(--muted); transition: transform var(--t-base) var(--ease); }
.section.is-collapsed .section__chev { transform: rotate(-90deg); }
.section.is-collapsed .section__body { display: none; }

/* ---------- Item ---------- */
.item { border-bottom: 1px solid var(--line-soft); transition: background var(--t-fast) var(--ease); }
.item:last-child { border-bottom: none; }
.item:hover { background: var(--parch); }
.item.is-open { background: var(--parch); }
/* GOBIMANS-352: flex вместо grid — при видимом чекбоксе детей четыре, и трёхколоночная
   сетка разъезжалась (точка в 1fr, тело у правого края, контролы на своей строке). */
.item__main { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; }
.item__dot { width: 11px; height: 11px; border-radius: 4px; margin-top: 4px; flex: 0 0 auto; background: var(--s-none); transition: background var(--t-base) var(--ease); }
.item[data-status="backlog"] .item__dot { background: var(--s-backlog); }
.item[data-status="production"] .item__dot { background: var(--s-prod); }
.item[data-status="review"] .item__dot { background: var(--s-review); }
.item[data-status="approval"] .item__dot { background: var(--s-appr); }
.item[data-status="done"] .item__dot { background: var(--s-done); }

.item__body { flex: 1; min-width: 0; cursor: pointer; }
.ronote { font-size: 12.5px; color: var(--bronze-ink); background: var(--parch-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 6px; line-height: 1.45; }
.item__detail [data-f]:disabled, .item__detail [data-bf-section]:disabled,
.taskcard__head .statussel:disabled { opacity: .9; cursor: not-allowed; background: var(--parch-2); }
.item__body:hover .item__title { color: var(--bronze-ink); text-decoration: underline; text-underline-offset: 3px; }
.item__titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item__title { font-weight: 600; font-size: 14.5px; }
.item__title--en { color: var(--muted); font-weight: 500; font-size: 13px; }
.udot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.udot[data-u="very urgent"] { background: var(--u-hot); box-shadow: 0 0 0 3px rgba(178,58,46,.14); }
.udot[data-u="please take care"] { background: var(--u-warn); }
.udot[data-u="understood"] { background: var(--u-ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--u-ok) 16%, transparent); }   /* GOBIMANS-252: was --s-none, near-invisible */
.item__sub { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* GOBIMANS-352: на десктопе мета — одна строка; ужимается только текстовый сниппет (последний),
   бейджи и чипы остаются целыми. На мобиле перенос сохраняем. */
@media (min-width: 721px) {
  .item__sub { flex-wrap: nowrap; overflow: hidden; }
  .item__sub > * { flex: 0 0 auto; }
  .item__sub > .cmtprev:last-child { flex: 0 1 auto; }
}
.resp { display: inline-flex; align-items: center; gap: 5px; background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; color: var(--ink-2); font-weight: 600; }
.resp__ic { color: var(--bronze-ink); }
.atype { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bronze-ink);
  background: color-mix(in oklch, var(--bronze) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--bronze) 24%, var(--surface));
  border-radius: 6px; padding: 1px 7px; flex: 0 0 auto; }
.cmtprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.item__ctrls { display: flex; align-items: center; gap: 8px; }

.statussel {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 26px 6px 12px; background: var(--surface); color: var(--ink);
  /* stroke is a literal copy of --muted (#6d6d6d) — data-URIs can't reference custom
     properties, so update this hex by hand if --muted ever changes. GOBIMANS-182:
     was #6B6353, a leftover from the deleted cream palette. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3l3 3 3-3' fill='none' stroke='%236d6d6d' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.statussel[data-v="backlog"]    { background-color: color-mix(in oklch, var(--s-backlog) 14%, var(--surface)); color: color-mix(in oklch, var(--s-backlog) 72%, var(--ink)); border-color: color-mix(in oklch, var(--s-backlog) 32%, var(--surface)); }
.statussel[data-v="production"] { background-color: color-mix(in oklch, var(--s-prod) 16%, var(--surface)); color: color-mix(in oklch, var(--s-prod) 78%, var(--ink)); border-color: color-mix(in oklch, var(--s-prod) 34%, var(--surface)); }
.statussel[data-v="review"]     { background-color: color-mix(in oklch, var(--s-review) 14%, var(--surface)); color: color-mix(in oklch, var(--s-review) 72%, var(--ink)); border-color: color-mix(in oklch, var(--s-review) 32%, var(--surface)); }
.statussel[data-v="approval"]   { background-color: color-mix(in oklch, var(--s-appr) 15%, var(--surface)); color: color-mix(in oklch, var(--s-appr) 74%, var(--ink)); border-color: color-mix(in oklch, var(--s-appr) 33%, var(--surface)); }
.statussel[data-v="done"]       { background-color: color-mix(in oklch, var(--s-done) 15%, var(--surface)); color: color-mix(in oklch, var(--s-done) 72%, var(--ink)); border-color: color-mix(in oklch, var(--s-done) 33%, var(--surface)); }

.expand { color: var(--muted); background: none; border: none; padding: 6px; font-size: 13px; border-radius: 8px; line-height: 1; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.expand:hover { background: var(--parch-2); color: var(--ink); }

/* detail reveal — display toggle (leak-proof) + opacity/transform fade-in */
.item__detailwrap { display: contents; }
.item__detail { display: none; padding: 2px 16px 16px; gap: 12px; }
.item.is-open .item__detail { display: grid; animation: detail-in var(--t-base) var(--ease); }
@keyframes detail-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
/* GOBIMANS-403 (аудит 4.10, находка 6.25): без капса. Подпись поля стояла ЗАГЛАВНЫМИ по-английски
   прямо над русским значением — `WHAT WE MAKE` над «11 тренеров: 7 в фоне…»; перевести содержимое
   задачи нельзя (это данные, а не интерфейс), но можно перестать кричать подписью поверх него.
   Заодно уходит разнобой регистров: `BRIEF`, `PRODUCTION` капсом против `Task history` обычным. */
.field span { letter-spacing: .01em; font-size: 11.5px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 14px; color: var(--ink); font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface); width: 100%;
}
.field textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.detail__foot { display: flex; justify-content: space-between; align-items: center; }
.savehint { font-size: 12px; color: var(--muted); }
.linkify { color: var(--bronze-ink); text-decoration: underline; }

.section__add { width: 100%; text-align: left; padding: 10px 16px; background: none; border: none; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.section__add:hover { background: var(--parch-2); color: var(--bronze-ink); }

.empty { max-width: var(--content-max); margin: 40px auto; text-align: center; color: var(--muted); padding: 0 16px; }

/* ---------- Dialog / toast ---------- */
.dlg { border: none; border-radius: var(--radius); padding: 0; box-shadow: var(--e-3); background: transparent; }
.dlg::backdrop { background: rgba(33,31,28,.45); }
.dlg[open] { animation: pop-in var(--t-base) var(--ease); }
.dlg[open]::backdrop { animation: fade-in var(--t-base) var(--ease); }
.dlg__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; width: min(420px, 92vw); display: grid; gap: 12px; }
.dlg__title { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0; }
.dlg__hint { color: var(--muted); font-size: 13px; margin: 0; }
.dlg__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Branded confirm dialog (GOBIMANS-200) — compact 1:1 drop-in for window.confirm(), see confirmDialog() in app.js */
.dlg--confirm .dlg__card { width: min(360px, 92vw); gap: 18px; }
.dlg--confirm__msg { margin: 0; font-size: var(--fs-body); color: var(--ink); line-height: 1.45; white-space: pre-line; }
/* Client-portal QR (GOBIMANS-144) — light quiet zone so it scans in both themes */
.qr { width: min(240px, 64vw); aspect-ratio: 1; margin: 4px auto; padding: 12px; background: var(--qr-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }

/* GOBIMANS-355: the stack is a manual popover, so it lives in the top layer and reads above an
   open <dialog>. The UA sheet styles [popover] as a centred bordered box — reset all of it and
   keep our own placement. Browsers without popover support just ignore the attribute and fall
   back to the z-index below. */
.toaststack {
  position: fixed; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  overflow: visible; width: auto; height: auto;
  left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px); pointer-events: none;
}
/* display:flex above is an author rule, so it also beats the UA `[popover]:not(:popover-open)
   { display: none }` — the closed stack stays in the flow as an empty, click-through aria-live
   region, which is what the screen reader wants. */
.toast {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  background: var(--ink); color: var(--parch); padding: 11px 18px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: var(--e-4); border: 1px solid var(--bronze);
  animation: toast-in var(--t-base) var(--ease); pointer-events: auto; cursor: pointer;
}
.toast.is-out { animation: toast-out var(--t-fast) var(--ease) forwards; }
.toast__ic { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  font-size: 11px; font-weight: 800; flex: 0 0 auto; background: var(--bronze); color: #fff; }
.toast__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast--success { border-color: var(--s-done); } .toast--success .toast__ic { background: var(--s-done); }
.toast--error { border-color: var(--u-hot); } .toast--error .toast__ic { background: var(--u-hot); }
.toast--error .toast__msg { white-space: normal; }
.toast--info .toast__ic { background: var(--bronze); }

@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
.gate__card { animation: pop-in var(--t-base) var(--ease); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .brand__sub { display: none; }
  .eh__name { font-size: 23px; }
  .item__main { flex-wrap: wrap; }
  .item__ctrls { width: 100%; justify-content: flex-start; margin-top: 8px; padding-left: 23px; }
  .detail__grid { grid-template-columns: 1fr; }
  .selwrap span { display: none; }
  .selwrap select { max-width: 150px; }
  /* touch targets ≥ 40px */
  .statussel { min-height: 40px; }
  .expand { min-width: 44px; min-height: 44px; }
  .fchip, .btn--chip { min-height: 38px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* avoid iOS zoom */
  /* Saved-views popover on mobile (GOBIMANS-152 AC10): the wrapped toolbar puts the «Виды»
     chip at an unpredictable x, so anchoring the popover to either chip edge (right:0 or
     left:0) can push it past a viewport edge (repro: left=-68px at 390px). Anchor it to the
     sticky .toolbar (a positioning context) and pin it to the content width instead, so it
     stays inside the viewport at any width. */
  .views { position: static; }
  .views__pop { left: 16px; right: 16px; width: auto; max-width: none; }
}

/* ---------- View nav (in-event tabs) ---------- */
.viewnav {
  position: sticky; top: var(--topbar-h); z-index: 16;
  display: flex; gap: 4px; padding: 0 16px;
  max-width: var(--content-max); margin: 0 auto; width: 100%;
  background: var(--parch); border-bottom: 1px solid var(--line-soft);
}
.vtab {
  border: none; background: none; padding: 8px 12px 7px; margin-bottom: -1px;   /* GOBIMANS-349 */
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.vtab:hover { color: var(--ink); }
/* GOBIMANS-324: полоса вкладок денежного хаба. Тот же .viewnav, что и внутри проекта, но она не
   липнет к верху — под ней идёт длинная простыня реестра, и залипшая полоса на мобильном съедала
   бы ещё одну строку из тех, что мы отвоевали в GOBIMANS-319. */
.viewnav--money { position: static; margin-bottom: 4px; }

/* GOBIMANS-319: «Ещё» — только мобильная кнопка; на десктопе всё и так на экране. */
.vtab--more { display: none; }
.vtab.is-active { color: var(--ink); border-bottom-color: var(--bronze); }
.vtab__n { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--parch-2); border-radius: 999px; padding: 1px 7px; }
.vtab.is-active .vtab__n { background: var(--bronze); color: var(--surface); }

/* toolbar becomes sticky below viewnav */
.toolbar { top: calc(var(--topbar-h) + 36px); }   /* GOBIMANS-349: вкладки ниже стали */

/* view header shared */
.vhead { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 18px 16px 4px; display: flex; align-items: center; gap: 12px; }
.vhead__t { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0; flex: 1 1 auto; min-width: 0; }
.vhint { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 0 16px 8px; color: var(--muted); font-size: 13px; }
/* GOBIMANS-403: правый хвост заголовка экрана (дата на командной Главной) и строка действия
   под содержимым — та же центрирующая рамка, что у .vhead / .rgroup, никакой своей ширины. */
.vhead__meta { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.vfoot { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); display: flex; }
.vempty { max-width: var(--content-max); margin: 0 auto; padding: 30px 16px; color: var(--muted); text-align: center; }
/* GOBIMANS-329: действие внутри пустого состояния — отдельной строкой под текстом. */
.vempty__act { display: block; margin: 12px auto 0; }
.board > .vhead:first-child { padding-top: 8px; }

/* ---------- Due badge ---------- */
.due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.due--over { background: var(--tint-bad-bg); color: var(--tint-bad-ink); border-color: var(--tint-bad-line); }
.due--soon { background: var(--tint-warn-bg); color: var(--tint-warn-ink); border-color: var(--tint-warn-line); }
.due--ok { background: var(--parch-2); color: var(--ink-2); }
.due--snoozed { background: var(--parch-2); color: var(--muted); }   /* GOBIMANS-119: muted, no urgency color */
/* Due tomorrow (GOBIMANS-252): one notch hotter than the generic within-week --due--soon (which
   spans up to 7 days out and reads the same whether due tomorrow or in 6 days) but a clear step
   below overdue red. Built from the locked brand --orange, not a new hex. */
.due--tomorrow { background: color-mix(in oklch, var(--orange) 16%, var(--surface)); color: var(--bronze-ink); border-color: color-mix(in oklch, var(--orange) 42%, var(--surface)); font-weight: 700; }
/* ---------- Board health: days-in-stage badge (GOBIMANS-93) ---------- */
.agetag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--parch-2); color: var(--ink-2); }
.agetag--stuck { background: var(--tint-bad-bg); color: var(--tint-bad-ink); border-color: var(--tint-bad-line); }
.agetag--silent { background: var(--tint-warn-bg); color: var(--tint-warn-ink); border-color: var(--tint-warn-line); } /* GOBIMANS-256: client-silent (approval waiting) */
.fchip#dueOverdue.is-on, #dueOverdue.is-on { background: var(--u-hot); border-color: var(--u-hot); color: #fff; }
#dueWeek.is-on { background: var(--u-warn); border-color: var(--u-warn); color: var(--ink); }

/* ---------- Documents ---------- */
.rgroup { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); }
.rgroup__h { padding: 11px 16px; background: var(--parch-2); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.rgroup__n { font-size: 12px; color: var(--muted); font-weight: 600; }
.rgroup__h--over { color: var(--tint-bad-ink); background: var(--tint-bad-bg); border-bottom-color: var(--tint-bad-line); }
.rrow { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.rrow:last-child { border-bottom: none; }
.rrow:hover { background: var(--parch); }
.rrow__link { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--ink); }
.rrow__kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bronze-ink); background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 7px; flex: 0 0 auto; }
.rrow__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.rrow__link:hover .rrow__title { color: var(--bronze-ink); text-decoration: underline; }
.rrow__meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rtag { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.rtag--g { color: var(--muted); }
.xbtn { border: none; background: none; color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.xbtn:hover { background: var(--tint-bad-bg); color: var(--tint-bad-ink); }

/* ---------- Publication calendar ---------- */
.cal { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.calrow { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.calrow.is-past { opacity: .58; }
.calrow.is-today { border-color: var(--bronze); background: var(--parch-2); opacity: 1; }
.calrow__date { display: grid; justify-items: center; line-height: 1.05; text-align: center; }
.calrow__date b { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink); }
.calrow__date span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.calrow__date i { font-size: 10px; font-style: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.calrow__body { min-width: 0; }
.calrow__top { display: flex; align-items: center; gap: 8px; }
.calrow__kind { font-size: 15px; flex: 0 0 auto; }
.calrow__title { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calrow__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bronze-ink);
  background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; }
.calrow__meta { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.calrow__rel, .calrow__note { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calrow__act { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.calrow__link { text-decoration: none; font-size: 15px; padding: 4px 6px; border-radius: 6px; line-height: 1; cursor: pointer; }
.calrow__link:hover { background: var(--parch-2); }
.calrow__link--off { border: none; background: none; cursor: pointer; opacity: .5; }
.calst { border: 1px solid var(--line-soft); background: var(--parch-2); color: var(--ink-2); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast); }
.calst.is-ready { color: var(--bronze-ink); background: color-mix(in oklch, var(--bronze) 14%, var(--surface)); border-color: color-mix(in oklch, var(--bronze) 35%, var(--line)); }
.calst.is-published { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 16%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 38%, var(--line)); }
.calst--overdue { border: 1px solid var(--tint-bad-line); background: var(--tint-bad-bg); color: var(--tint-bad-ink); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---------- Production plan: timeline rows + team load ---------- */
.calrow[role="button"] { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.calrow[role="button"]:hover { border-color: var(--bronze-2); box-shadow: var(--shadow); }
.calrow .resp { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.calrow .resp__ic { color: var(--bronze-ink); font-size: 9px; }
.loadwrap { max-width: var(--content-max); margin: 4px auto 0; width: calc(100% - 32px); overflow-x: auto; padding-bottom: 80px; }
.loadtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.loadtbl th, .loadtbl td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.loadtbl thead th { background: var(--parch-2); font-size: 11px; color: var(--muted); }
.loadtbl thead th b { display: block; font-size: 12px; color: var(--ink); }
.loadtbl thead th span { font-size: 10px; }
.loadtbl .lt-name { text-align: left; font-weight: 700; color: var(--ink); white-space: nowrap; }
.loadtbl .lt-total { font-weight: 700; }
.lt-cell { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: 999px; font-weight: 700; color: var(--ink); background: var(--parch-2); }
.lt-cell.lvl1 { background: color-mix(in oklch, var(--bronze) 12%, var(--surface)); }
.lt-cell.lvl2 { background: color-mix(in oklch, var(--bronze) 24%, var(--surface)); }
.lt-cell.lvl3 { background: color-mix(in oklch, var(--orange) 34%, var(--surface)); }
.lt-cell.lvl4 { background: color-mix(in oklch, var(--u-hot) 36%, var(--surface)); }
.lt-overbadge { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 999px; font-weight: 700; background: var(--tint-bad-bg); color: var(--tint-bad-ink); }
/* this-week status + emphasis (GOBIMANS-96) */
.loadtbl .lt-now b { font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; }
.loadtbl .lt-wknow { background: color-mix(in oklch, var(--bronze) 7%, var(--surface)); }
.loadtbl thead th.lt-wknow { background: color-mix(in oklch, var(--bronze) 14%, var(--parch-2)); }
.lt-stchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line-soft); }
.lt-stchip--overload { color: var(--tint-bad-ink); background: var(--tint-bad-bg); border-color: color-mix(in oklch, var(--tint-bad-ink) 30%, var(--line)); }
.lt-stchip--idle { color: var(--muted); background: var(--parch-2); }
.lt-stchip--ok { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 12%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 30%, var(--line)); }
.lt-stchip--tight { color: color-mix(in oklch, var(--u-warn) 55%, black); background: color-mix(in oklch, var(--u-warn) 16%, var(--surface)); border-color: color-mix(in oklch, var(--u-warn) 35%, var(--line)); }

/* Next-month load forecast panel (GOBIMANS-131) */
.lfc { max-width: var(--content-max); margin: 8px auto 2px; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--parch-2); padding: 14px 16px; }
.lfc__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lfc__t { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.lfc__sub { margin: 6px 0 10px; font-size: 12px; color: var(--muted); }
.lfc__sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lfc__people { display: flex; flex-wrap: wrap; gap: 8px; }
.lfc__person { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 8px 3px 11px; }
.lfc__name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lfc__count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lfc__needowner { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.lfc__note { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.lfc__empty { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Roles v2: client-visible flag, revisions, final link ---------- */
.chkfield { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); cursor: pointer; padding: 2px 0; }
.chkfield input { width: 16px; height: 16px; accent-color: var(--bronze); cursor: pointer; flex: 0 0 auto; }
.chkfield__hint { font-size: 12px; color: var(--muted); }
.cvtag { font-size: 12px; opacity: .85; }
.revtag { font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.revtag--over { color: var(--tint-bad-ink); background: var(--tint-bad-bg); border-color: var(--tint-bad-line); }
/* ---------- Task tags (GOBIMANS-100) ---------- */
.tagchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: color-mix(in oklch, var(--tagc, var(--muted)) 75%, var(--ink));
  background: color-mix(in oklch, var(--tagc, var(--muted)) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--tagc, var(--muted)) 32%, var(--line));
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.tagchip button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; opacity: .7; font-size: 10px; line-height: 1; }
.tagchip button:hover { opacity: 1; }
.kc__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; }
.tagbox { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.tagbox:empty { display: none; }

/* ---------- Sub-task checklist (GOBIMANS-101) ---------- */
.subtag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--parch-2); color: var(--ink-2); }
.subtag--done { color: var(--s-appr, var(--ink-2)); border-color: color-mix(in oklch, var(--s-appr, var(--line)) 40%, var(--line)); background: color-mix(in oklch, var(--s-appr, var(--parch-2)) 16%, var(--parch-2)); }
.subbox { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.subbox:empty { display: none; }
.subrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 4px 2px; border-bottom: 1px dashed var(--line-soft); }
.subrow:last-child { border-bottom: 0; }
.subrow input[type="checkbox"] { flex: 0 0 auto; width: auto; }
.subrow span { flex: 1; word-break: break-word; }
.subrow--done span { color: var(--muted); text-decoration: line-through; }
.subrow button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; opacity: .55; font-size: 11px; line-height: 1; flex: 0 0 auto; }
.subrow button:hover { opacity: 1; }

/* ---------- Finances (owner-only) ---------- */
/* GOBIMANS-314: четвёртая плитка «ждём оплаты» — auto-fit, а не жёсткие 4 колонки: на узком
   десктопе плитки переносятся сами.
   GOBIMANS-428: это была карточка на число — четыре отдельных плитки с рамкой, тенью и цифрой
   в 22px. Ровно «hero-metric template» и «карточная сетка ради сетки», два анти-референса из
   PRODUCT.md, и на 390px они занимали 368px вертикали на четыре числа. Теперь одна полоса цифр:
   рамка одна на всех, разделители — волосяные линии, minmax меньше. Числа никуда не делись, ушла
   декорация вокруг каждого. Правило общее — те же плитки стоят в воронке и в калькуляторе. */
.finsum {
  max-width: var(--content-max); margin: 8px auto 0; width: calc(100% - 32px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--e-1); overflow: hidden;
}
.finbar { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); display: flex; justify-content: flex-end; }
/* Owner dashboard */
.dashgrid { max-width: var(--content-max); margin: 8px auto 0; width: calc(100% - 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.dashc { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--e-1); }
.dashc span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dashc b { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
.dashc--m { border-color: var(--bronze); } .dashc--m b { color: var(--bronze-ink); }
.dashc--alert b { color: var(--u-hot); } .dashc--warn b { color: var(--s-appr); }
.pltable td, .pltable th { font-variant-numeric: tabular-nums; }
.pltable td:not(:first-child), .pltable th:not(:first-child) { text-align: right; }
.pl-in { color: var(--s-done); font-weight: 700; } .pl-out { color: var(--u-hot); } .pl-tax { color: var(--terra); }
.pl-m { font-weight: 700; color: var(--bronze-ink); }
.marginchart { width: 100%; height: 110px; display: block; margin: 2px 0 4px; }
.mbar--pos { fill: var(--s-done); } .mbar--neg { fill: var(--u-hot); }
.mbar__base { stroke: var(--line); stroke-width: 1; }
.mbar__lbl { fill: var(--muted); font-size: 9px; font-family: var(--font-ui); }
/* New-business funnel (GOBIMANS-126) */
.funnel { padding: 8px 16px 12px; }
.funnel__row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; }
.funnel__lbl { font-size: 13px; color: var(--muted); }
.funnel__bar { height: 20px; background: var(--parch-2); border-radius: 4px; overflow: hidden; }
.funnel__fill { display: block; height: 100%; min-width: 2px; background: var(--bronze); border-radius: 4px; }
.funnel__n { font-family: var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.funnel__conv { margin: 2px 0; padding-left: 140px; }
.funnel__conv span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Bulk actions */
.item__sel { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 2px 0 0; accent-color: var(--bronze); cursor: pointer; }
.item.is-selected { background: color-mix(in oklch, var(--bronze) 7%, var(--surface)); }
.bulkbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  max-width: calc(100vw - 24px); padding: 8px 10px 8px 16px; border-radius: 20px;
  background: var(--ink); color: var(--parch); box-shadow: var(--e-3); }
.bulkbar__n { font-weight: 700; font-size: 13px; white-space: nowrap; }
.bulkbar select, .bulkbar input[type="date"], .bulkbar input[type="number"] { font-family: inherit; font-size: 13px; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: var(--parch); color-scheme: dark; }
.bulkbar input[type="number"] { width: 82px; }
.bulkbar .btn { background: rgba(255,255,255,.12); color: var(--parch); border-color: rgba(255,255,255,.22); }
.bulkbar .btn:hover { background: rgba(255,255,255,.22); }
@media (max-width: 480px) {   /* never overflow a phone — span the width, count on its own line */
  .bulkbar { left: 8px; right: 8px; max-width: none; transform: none; bottom: 12px; gap: 6px; padding: 8px 12px; }
  .bulkbar__n { flex: 1 1 100%; }
  .bulkbar select, .bulkbar input[type="date"], .bulkbar input[type="number"] { flex: 1 1 auto; }
}
/* Publish-date month calendar (Plan tab) */
.cal2 { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); }
.cal2__h { padding: 11px 16px; background: var(--parch-2); font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line-soft); text-transform: capitalize; }
.cal2__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal2__dow { padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--line-soft); }
.cal2__cell { min-height: 64px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.cal2__cell--empty { background: var(--parch); }
.cal2__cell.is-today { background: color-mix(in oklch, var(--bronze) 8%, var(--surface)); }
.cal2__d { font-size: 11px; font-weight: 700; color: var(--muted); }
.cal2__cell.is-today .cal2__d { color: var(--bronze-ink); }
.cal2__chip { display: block; width: 100%; text-align: left; font-size: 10.5px; font-weight: 600; padding: 2px 5px; border-radius: 5px; border: none; cursor: pointer; background: var(--parch-2); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal2__chip[data-status="production"] { background: color-mix(in oklch, var(--s-prod) 22%, var(--surface)); color: var(--ink); }
.cal2__chip[data-status="review"] { background: color-mix(in oklch, var(--s-review) 18%, var(--surface)); }
.cal2__chip[data-status="approval"] { background: color-mix(in oklch, var(--s-appr) 18%, var(--surface)); }
.cal2__chip[data-status="done"] { background: color-mix(in oklch, var(--s-done) 18%, var(--surface)); }
@media (max-width: 600px) { .cal2__cell { min-height: 50px; } .cal2__chip { font-size: 9px; padding: 1px 3px; } }
/* Skeleton loading rows (replace the bare "loading" text on data fetch) */
.skel { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 8px; }
.skel__row { height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft);
  background: linear-gradient(90deg, var(--parch-2) 25%, var(--parch-3) 37%, var(--parch-2) 63%);
  background-size: 400% 100%; animation: skel 1.4s var(--ease) infinite; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel__row { animation: none; } }
/* Task history (collapsible in the modal) */
.taskhist { margin-top: 8px; border-top: 1px solid var(--line-soft); }
.taskhist > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--bronze-ink); padding: 8px 0; list-style: none; }
.taskhist > summary::-webkit-details-marker { display: none; }
.taskhist > summary::before { content: "▸ "; }
.taskhist[open] > summary::before { content: "▾ "; }
.taskhist__list { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 8px; }
.taskhist__row { font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; }
.taskhist__row b { color: var(--ink); font-weight: 700; }
.taskhist__row i { color: var(--muted); font-style: normal; font-size: 11px; margin-left: auto; white-space: nowrap; }
.taskhist__empty { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
/* GOBIMANS-123: per-field diff block under the actor/time line */
.taskhist__diff { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.taskhist__diffrow { font-size: 12px; color: var(--ink-2); }
.taskhist__fld { font-weight: 700; color: var(--bronze-ink); }
.taskhist__old, .taskhist__arrow { color: var(--muted); }
.taskhist__new { color: var(--ink); }

/* ---------- Task card v2: read-mode + zones (GOBIMANS-201) ---------- */
/* GOBIMANS-389: `.taskdetail` used to carry a bare `display: grid`. The render hangs it on the
 * same node as `.item__detail` (app.js), whose `display: none` sits ~360 lines earlier at equal
 * specificity — so the later rule won and NO list row ever collapsed. On ≤720px, where the list
 * is the default view, that meant the whole board rendered expanded (12 tasks → 13 274px of page)
 * and every task's comment thread was fetched on load; the collapse button did nothing.
 * The two rules below restate the collapsed/open pair qualified by both classes, so they outrank
 * the plain `.taskdetail`; the gap this class exists for stays where it was.
 * Left as a selector fix on purpose — dropping the class from the markup is the tidier change and
 * belongs to the next styles pass, not to a live-in-production bug. */
.item .item__detail.taskdetail { display: none; }
.item.is-open .item__detail.taskdetail { display: grid; }
.taskdetail { gap: 4px; }
.taskedit-toggle { justify-self: start; margin-bottom: 6px; }
.taskread, .taskform { display: grid; gap: 12px; }
.taskread[hidden], .taskform[hidden] { display: none; }
.taskread__head { display: grid; gap: 6px; }
.taskread__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.taskread__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.taskread__meta { font-size: 12px; color: var(--muted); }
/* Бриф / Производство / Обсуждение zones — same collapsible language as .taskhist above */
.tzone { border-top: 1px solid var(--line-soft); padding-top: 2px; }
/* GOBIMANS-403 (аудит 4.10, находка 6.25): без капса — тот же разнобой регистров, что и у .field span
   выше: `BRIEF`, `PRODUCTION` заглавными против `Task history` обычным на одном экране. */
.tzone > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--bronze-ink); padding: 9px 0; list-style: none; }
.tzone > summary::-webkit-details-marker { display: none; }
.tzone > summary::before { content: "▸ "; }
.tzone[open] > summary::before { content: "▾ "; }
.tzone__body { display: grid; gap: 12px; padding: 2px 0 10px; }
.tzone--discuss { border-top: 1px solid var(--line-soft); padding-top: 4px; margin-top: 2px; }
.tzone--discuss .taskhist { margin-top: 0; border-top: none; }
/* typographic read rows */
.ro__row { display: grid; gap: 3px; }
/* GOBIMANS-403 (аудит 4.10, находка 6.25): без капса — это и есть та самая «английская подпись
   над русским значением»: `WHAT WE MAKE` заглавными прямо над «11 тренеров: 7 в фоне…». В карточке
   только просмотра подписи как раз и стоят над данными задачи, которые интерфейс не переводит. */
.ro__lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.ro__val { font-size: 14px; color: var(--ink); line-height: 1.5; }
.ro__p { margin: 0; white-space: pre-wrap; }
.ro__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ro__list li { font-size: 13.5px; color: var(--ink-2); }
.ro__list li.is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.ro__empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
/* per-field inline save feedback (AC6) — sits under the field it belongs to, not just the footer */
.fsave { display: none; font-size: 11px; font-weight: 700; color: var(--s-done); }
.fsave.is-on { display: block; animation: fade-in var(--t-fast) var(--ease); }
.fsave--err { color: var(--u-hot); }
.chkfield .fsave { margin-left: 4px; }
.chkfield .fsave.is-on { display: inline; }

/* Ячейка полосы, а не карточка (GOBIMANS-428): своей рамки, тени и радиуса у неё больше нет —
   они у .finsum. Разделяет ячейки одна волосяная линия слева, у первой в ряду её нет. */
.finsum__c { padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--line-soft); }
.finsum__c:first-child { border-left: none; }
.finsum__c span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.finsum__c b { font-family: var(--font-display); font-size: 17px; }
.finsum__c--in b { color: var(--s-done); }
.finsum__c--out b { color: var(--u-hot); }
/* Маржа выделяется чернилами, а не рамкой: рамка ячейки внутри общей полосы нарисовала бы
   вложенную карточку, а вложенные карточки не бывают правы. */
.finsum__c--m b { color: var(--bronze-ink); }
/* GOBIMANS-314: «ждём оплаты» — деньги не наши, пока не пришли, поэтому нейтральный тон, а не
   зелёный «приход»: плитка сообщает, а не хвалит. --ink-2 на белом — 8.45:1. */
.finsum__c--wait b { color: var(--ink-2); }
.fin-gmargin { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--bronze-ink); }
.fin-tariff { padding: 8px 16px; font-size: 13px; color: var(--ink-2); background: var(--parch); border-bottom: 1px solid var(--line-soft); }
.finrow { cursor: pointer; }
.fin-ic { font-size: 14px; flex: 0 0 auto; }
.fin-who, .fin-date, .fin-item, .fin-channel { font-size: 12px; color: var(--muted); }
.fin-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.fin-channel { padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--parch-2); white-space: nowrap; }
.fin-date { white-space: nowrap; }
.fin-fx { white-space: nowrap; font-style: italic; }
.fin-amt { font-weight: 700; font-size: 14px; white-space: nowrap; }
.fin-amt--invoice { color: var(--s-done); }
.fin-amt--payout { color: var(--u-hot); }
.fin-amt--estimate { color: var(--ink-2); }
.finst { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line-soft); background: var(--parch-2); color: var(--ink-2); white-space: nowrap; }
.finst--sent { color: var(--bronze-ink); }
.finst--paid { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 14%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 35%, var(--line)); }
.fin-tax { font-size: 11.5px; color: var(--terra); font-weight: 600; white-space: nowrap; }
.fin-recur { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* «Идеи» (GOBIMANS-178) */
.finst--maturing { color: var(--bronze-ink); }
.finst--taken { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 14%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 35%, var(--line)); }
.finst--archived { opacity: .6; }
/* «Входящие» (GOBIMANS-255) */
.finst--accepted { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 14%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 35%, var(--line)); }
.finst--rejected { color: var(--u-hot); background: color-mix(in oklch, var(--u-hot) 12%, var(--surface)); border-color: color-mix(in oklch, var(--u-hot) 32%, var(--line)); }
.inbox-reject { margin-top: 8px; display: none; gap: 8px; align-items: flex-start; }
.inbox-reject.is-open { display: flex; }
/* GOBIMANS-399: two boxes now — the internal reason and the line the client reads. On a narrow
   screen one row cannot hold both, so the row wraps rather than clipping the second one off the
   edge. (The send button was already being clipped here at 390px with a single box.) */
.inbox-reject { flex-wrap: wrap; }
.inbox-reject textarea { flex: 1 1 220px; min-width: 0; min-height: 40px; }
.inbox-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; flex-basis: 100%; }
.inbox-reason { font-size: 12.5px; color: var(--muted); margin-top: 4px; flex-basis: 100%; }
/* GOBIMANS-399: the note the CLIENT reads, next to the internal reason. Told apart on sight so
   nobody has to remember which of the two lines leaves the building. */
.inbox-reason--client { color: var(--ink-2); border-left: 2px solid var(--s-appr); padding-left: 8px; }
.idea-composer { display: flex; gap: 8px; max-width: var(--content-max); margin: 0 auto; padding: 0 16px 10px; }
.idea-composer input { flex: 1; min-width: 0; }
.idea-filters { display: flex; gap: 6px; flex-wrap: wrap; max-width: var(--content-max); margin: 0 auto; padding: 0 16px 10px; }
.idea-archive { max-width: var(--content-max); margin: 8px auto 0; padding: 0 16px; }
.idea-archive > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--bronze-ink); padding: 8px 0; list-style: none; }
.idea-archive > summary::-webkit-details-marker { display: none; }
.idea-archive > summary::before { content: "▸ "; }
.idea-archive[open] > summary::before { content: "▾ "; }
.fin-unpaid { font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: 2px 8px;
  color: var(--tint-warn-ink); background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-line); }
.fl-taxline { margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--bronze-ink); background: var(--parch); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
/* Expense allocation editor (GOBIMANS-134) */
.fin-alloc { font-size: 11px; font-weight: 600; color: var(--bronze-ink); white-space: nowrap; padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--parch-2); }
.fl-alloc { margin: 4px 0 2px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--parch); }
.fl-alloc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--bronze-ink); }
.fl-alloc__rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 6px; }
.fl-alloc__row { display: grid; grid-template-columns: 1fr 1fr 90px auto; gap: 6px; align-items: center; }
.fl-alloc__row select, .fl-alloc__row input { min-width: 0; }
.fl-alloc__total { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fl-alloc__total--rem { color: var(--terra); }
.fl-alloc__total--over { color: var(--u-hot); }
.fl-alloc__hint { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .fl-alloc__row { grid-template-columns: 1fr 80px auto; } .fl-alloc__event { grid-column: 1 / -1; } }
/* Finance tools: converter + net→gross calculator (GOBIMANS-95) */
.fintools { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e-1); overflow: hidden; }
.fintools > summary { cursor: pointer; list-style: none; padding: 11px 16px; font-weight: 700; font-size: 13.5px; color: var(--bronze-ink); }
.fintools > summary::-webkit-details-marker { display: none; }
.fintools > summary::before { content: "▸ "; }
.fintools[open] > summary::before { content: "▾ "; }
.fintools__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }
.fintool--wide { grid-column: 1 / -1; }
.fintool--wide input[type="month"] { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.fintool__h { margin: 8px 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fintool__hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
/* Contract/NDA/Prilog registry (GOBIMANS-190) */
.ctr-sec { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e-1); overflow: hidden; }
.ctr-sec__top { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.ctr-sec .fintool__h { margin: 0; }
.ctr-sec .vempty { padding: 16px; }
.ctr-list { display: flex; flex-direction: column; }
.ctrrow { cursor: pointer; }
.ctr-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line-soft); background: var(--parch-2); color: var(--ink-2); white-space: nowrap; }
.ctr-badge--active { color: var(--s-done); background: color-mix(in oklch, var(--s-done) 14%, var(--surface)); border-color: color-mix(in oklch, var(--s-done) 35%, var(--line)); }
.ctr-badge--expiring { color: var(--u-warn); background: color-mix(in oklch, var(--u-warn) 16%, var(--surface)); border-color: color-mix(in oklch, var(--u-warn) 40%, var(--line)); }
.ctr-badge--expired { color: var(--u-hot); background: color-mix(in oklch, var(--u-hot) 16%, var(--surface)); border-color: color-mix(in oklch, var(--u-hot) 40%, var(--line)); }
.ctr-badge--renewing { color: var(--s-brief); background: color-mix(in oklch, var(--s-brief) 16%, var(--surface)); border-color: color-mix(in oklch, var(--s-brief) 40%, var(--line)); }
/* Payout rates + accumulating drafts (GOBIMANS-192) */
.prform { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.prform input { flex: 1 1 120px; min-width: 0; font-family: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.prrow { cursor: default; }
.pdlist { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.pdcard { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 12px; background: var(--parch-2); }
.pdcard--closed { opacity: .75; }
.pdcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pdcard__lines { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.pdline { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); padding: 3px 0; border-bottom: 1px dashed var(--line-soft); }
.pdline:last-child { border-bottom: none; }
.pdline--empty { color: var(--muted); font-style: italic; }
.pdline__amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdline--prov { opacity: .72; }
.pd-prov { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.pd-pending { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 8px; }
.pdcard__act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pr-groups { display: flex; flex-direction: column; gap: 12px; }
.pr-group__h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pr-group__h b { font-size: 13px; }
.pr-unsigned { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--warn, #b45309); border: 1px solid var(--warn, #b45309); border-radius: 4px; padding: 0 4px; }
.prform select, .prform input[type="date"] { font: inherit; }
.fxrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fxin { flex: 1 1 90px; min-width: 80px; font-family: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.fxsel { font-family: inherit; font-size: 14px; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.fxsel--wide { width: 100%; }
.fxarr { color: var(--muted); font-weight: 700; }
.fxout { margin-top: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.012em; color: var(--bronze-ink); font-variant-numeric: tabular-nums; }
.fxrates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.fxrates__l { flex: 1 1 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fxrate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.fxrate input { width: 78px; font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.ngrow { display: flex; gap: 10px; flex-wrap: wrap; }
.nglbl { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); flex: 1 1 130px; }
.nglbl .fxin { flex: 0 0 auto; }   /* in the vertical label column, don't let fxin's flex-basis become height */
.ngins { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.ngins input { accent-color: var(--bronze); width: 16px; height: 16px; }
.ngout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ngout__c { background: var(--parch); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; }
.ngout__c span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ngout__c b { font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.012em; }
.ngout__c--tax b { color: var(--terra); }
.ngout__c--gross { border-color: var(--bronze); } .ngout__c--gross b { color: var(--bronze-ink); }
@media (max-width: 600px) {
  .fintools__grid { grid-template-columns: 1fr; gap: 18px; }
  .ngout { grid-template-columns: 1fr; }
}
.lead-next { font-size: 12.5px; color: var(--bronze-ink); }
.lead-overdue { color: var(--u-hot); font-weight: 700; }
.hstat--alert b { color: var(--u-hot); }
.hstat--appr b { color: var(--s-appr); }

/* ---------- Contacts ---------- */
.cfilter { max-width: var(--content-max); margin: 0 auto 4px; width: 100%; padding: 4px 16px 8px; display: flex; flex-wrap: wrap; gap: 7px; }
/* GOBIMANS-350: на мобиле ряд чипов не растёт вниз на три строки, а скроллится вбок.
   GOBIMANS-428/430/434: это единственный правильный паттерн ряда кнопок, но до фазы C он стоял
   только на .cfilter. Вкладки денежного хаба, вкладки калькулятора и фильтры идей продолжали
   переноситься на вторую строку (замер: ряд вкладок 75px вместо 38px). Теперь правило одно на все
   четыре ряда — см. .chiprow ниже. */
@media (max-width: 720px) {
  .cfilter .fchip { flex: none; white-space: nowrap; }
}

}
/* Compacted (GOBIMANS-216, «занимает много места»): tighter cells + narrower min column —
   more cards per row, phone/email share one line below — no data dropped. */
/* GOBIMANS-433: справочник людей — список строк, а не сетка карточек.
   Те же люди на экране «Доступы» показаны таблицей, и это второй словарь компонентов для одних и
   тех же данных («inconsistent component vocabulary across screens» из product-регистра). Семь
   контактов занимали 360px вертикали и всю ширину впятером в ряд; в строку те же семь встают
   вдвое плотнее и читаются сверху вниз одной колонкой, как «Документы» и «Журнал».
   Разметка та же — поменялась раскладка: карточка стала строкой. */
.cgrid { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 8px 16px 96px; display: flex; flex-direction: column; gap: 6px; }
.ccard { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 8px 12px; display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; cursor: pointer; box-shadow: var(--e-1); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
/* Имя ведёт строку, тип и «✕» уходят вправо, остальное течёт между ними. */
.ccard__name { order: 1; }
.ccard__role { order: 2; }
.ccard__tags { order: 3; }
.ccard__lines { order: 4; }
.ccard__h { order: 5; margin-left: auto; }
.ccard__note { order: 6; flex: 1 1 100%; }
.ccard:hover { border-color: var(--bronze-2); box-shadow: var(--e-2); }
.ccard:focus-visible { border-color: var(--bronze); }
.tcard__people .ccard { background: var(--parch); box-shadow: none; }
.tcard__people .ccard:hover { transform: none; box-shadow: none; }
.ccard__h { display: flex; align-items: center; gap: 6px; }
.ctype { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bronze-ink); background: var(--parch-2); border-radius: 6px; padding: 2px 7px; }
.ccard__h .xbtn { margin-left: auto; }
.ccard__name { font-weight: 700; font-size: 14px; }
.ccard__role { font-size: 12.5px; color: var(--muted); }
/* Process role / successor status (GOBIMANS-193) */
.ccard__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ctag { font-size: 10.5px; font-weight: 600; border-radius: 6px; padding: 2px 7px; white-space: normal; }
.ctag--pr { color: var(--bronze-ink); background: var(--parch-2); }
.ctag--warn { color: var(--u-hot); background: color-mix(in oklch, var(--u-hot) 12%, transparent); }
.ccard__lines { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--bronze-ink); text-decoration: none; min-width: 0; }
.cline:hover { text-decoration: underline; }
.ccard__note { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Teams ---------- */
.tgrid { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 8px 16px 96px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.tcard { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); }
.tcard__h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: none; border: none; text-align: left; transition: background var(--t-fast) var(--ease); }
.tcard__h:hover { background: var(--parch); }
.tcard__logo { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 9px; background: var(--parch-2); border: 1px solid var(--line-soft); display: grid; place-items: center; overflow: hidden; }
.tcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tcard__logo--mono { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bronze-ink); }
.tcard__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; flex: 1 1 auto; min-width: 0; }
.tcard__loc { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tcard__ppl { font-size: 11px; font-weight: 700; color: var(--surface); background: var(--bronze); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.tcard__h .section__chev { transition: transform var(--t-base) var(--ease); }
.tcard.is-open .section__chev { transform: rotate(180deg); }
.tcard__body { display: none; padding: 0 14px 14px; }
.tcard.is-open .tcard__body { display: block; animation: detail-in var(--t-base) var(--ease); }
.tcard__motto { font-style: italic; color: var(--bronze-ink); font-size: 13.5px; margin-bottom: 6px; }
.tcard__bio { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.tcard__more summary { font-size: 12.5px; font-weight: 600; color: var(--bronze-ink); cursor: pointer; }
.tcard__more p { font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }
.tcard__summary { margin: 4px 0 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.tcard__periods { margin: 0 0 8px; } /* budget period switcher (GOBIMANS-211) */
.tcard__stat--res b { color: var(--bronze-ink); }
.tcard__cats { font-size: 12px; color: var(--muted); margin: 0 0 8px; } /* category slice (GOBIMANS-212) */
.ysum-cats { padding: 8px 16px; border-bottom: 1px solid var(--line-soft); } /* annual-summary category filter */
.tcard__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 8px; }
.tcard__stat { background: var(--parch-2); border-radius: var(--r-sm); padding: 8px 10px; }
.tcard__stat span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tcard__stat b { font-size: 15px; color: var(--ink); }
.tcard__summary textarea { min-height: 50px; }
.tcard__people { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.tcard__empty { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.prow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.prow:last-child { border-bottom: none; }
.prow__type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--bronze-ink); min-width: 64px; }
.prow__name { flex: 1 1 auto; font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prow .cline { font-size: 15px; }
.prow .xbtn { font-size: 12px; }

@media (max-width: 720px) {
  .viewnav { gap: 0; }
  .vtab { padding: 11px 9px 10px; font-size: 13px; }
  .toolbar { top: calc(var(--topbar-h) + 36px); }   /* GOBIMANS-349: вкладки ниже стали */
  .tgrid { grid-template-columns: 1fr; }
}

/* ---------- Global nav buttons (sidebar rail — see .railnav for the container) ---------- */
.gbtn {
  white-space: nowrap; padding: 6px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--parch);
  background: rgba(255,255,255,.08); border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease);
}
.gbtn:hover { background: rgba(255,255,255,.16); }
.gbtn.is-on { background: var(--parch); color: var(--ink); }

/* ---------- Captains table ---------- */
.ctable-wrap { max-width: var(--content-max); margin: 8px auto 96px; width: calc(100% - 32px); overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e-1); }
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 10px 14px; background: var(--parch-2); border-bottom: 1px solid var(--line-soft); }
.ctable td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.ctable tr:last-child td { border-bottom: none; }
.ctable tbody tr { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.ctable tbody tr:hover { background: var(--parch); }
.ctable tbody tr:focus-visible { background: var(--parch); outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ctable .ct-team { font-weight: 700; }
.ctable a { color: var(--bronze-ink); text-decoration: none; font-weight: 600; }
.ctable a:hover { text-decoration: underline; }
.ct-empty { color: var(--muted); }
.section__add--danger { color: var(--muted); }
.section__add--danger:hover { color: var(--tint-bad-ink); background: var(--tint-bad-bg); }

@media (max-width: 720px) {
  .gbtn { padding: 6px 10px; font-size: 12.5px; }
}

/* ---------- Brand as home button ---------- */
.brand { border: none; background: none; padding: 4px 6px 4px 0; margin: 0; border-radius: 8px; cursor: pointer; color: var(--parch); transition: background var(--t-fast) var(--ease); }
.brand:hover { background: rgba(255,255,255,.08); }
.brand.is-on .brand__mark { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); }

/* ---------- Health-check indicator (GOBIMANS-158) ---------- */
.healthbox { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 2px; }
.healthdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; cursor: default;
  background: var(--muted); box-shadow: 0 0 0 3px color-mix(in oklch, var(--muted) 20%, transparent);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.healthdot--online { background: var(--s-done); box-shadow: 0 0 0 3px color-mix(in oklch, var(--s-done) 20%, transparent); }
.healthdot--degraded { background: var(--u-warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--u-warn) 20%, transparent); }
.healthdot--offline { background: var(--u-hot); box-shadow: 0 0 0 3px color-mix(in oklch, var(--u-hot) 20%, transparent); }

/* ---------- Notifications bell ---------- */
.bellbox { position: relative; flex: 0 0 auto; }
.bell { position: relative; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--parch);
  border-radius: 999px; width: 36px; height: 36px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.bell:hover { background: rgba(255,255,255,.16); }
.bell__n { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--u-hot); color: var(--surface); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bellmenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(340px, 86vw);
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e-3); padding: 6px; }
/* The panel scrolled before too, but the macOS overlay scrollbar is invisible until you drag —
   a row cut in half at the bottom read as a broken menu, not a scrollable one. Keep the thumb
   visible whenever the list overflows so the cut edge announces itself. */
.bellmenu::-webkit-scrollbar { width: 8px; }
.bellmenu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.bellmenu::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.bellmenu__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 6px;
  position: sticky; top: 0; background: var(--surface); z-index: 1; }
.bellrow { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; }
.bellrow:hover { background: var(--parch-2); }
.bellrow.is-unread { background: color-mix(in oklch, var(--bronze) 8%, var(--surface)); }
.bellrow__t { font-size: 13.5px; color: var(--ink); }
.bellrow__time { font-size: 11px; color: var(--muted); }
.bellrow__empty { font-size: 13px; color: var(--muted); padding: 10px; }

/* ---------- Userbox (identity) ---------- */
.userbox { position: relative; flex: 0 0 auto; }
.userbtn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--parch);
  transition: background var(--t-fast) var(--ease); }
.userbtn:hover { background: rgba(255,255,255,.16); }
.userav { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--bronze); color: var(--surface); font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.usermeta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; }
.username { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
/* GOBIMANS-403 (аудит 4.3, находка 6.6): без lowercase. Это подпись к живому человеку — «Motion»,
   а не `motion`; строчные делали из роли похожей на слаг базы, чем она и выглядела. */
.userrole { font-size: 10.5px; color: var(--bronze-2); }
.userbtn .picker__chev { color: var(--parch); opacity: .6; }

.usermenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 200px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e-3); padding: 6px; animation: pop-in var(--t-base) var(--ease); }
.usermenu__item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: none;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background var(--t-fast) var(--ease); }
.usermenu__item:hover { background: var(--parch-2); }
.usermenu__item--sep { border-top: 1px solid var(--line-soft); margin-top: 4px; color: var(--bronze-ink); }
/* GOBIMANS-403: пункт меню, который существует только на узком экране (см. медиазапрос 560px). */
.usermenu__item--mobile { display: none; }
/* Account-menu glyph on touch / narrow screens (avatar+name on desktop). Deliberately NOT a
   hamburger (GOBIMANS-196) — .drawerbtn is the one real nav-opening ☰; this button opens the
   account dropdown, so it gets a distinct "more" glyph to avoid two identical ☰ with different meanings. */
.userbtn__burger { display: none; font-size: 20px; line-height: 1; padding: 0 3px; letter-spacing: 1px; }
/* GOBIMANS-403: кто вошёл — первой строкой меню. Показывается только на телефоне (см. медиазапрос),
   где имя и роль из кнопки убраны за нехваткой ширины. */
.usermenu__me { display: none; flex-direction: column; gap: 1px; padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft); }
.usermenu__mename { font-size: 14px; font-weight: 700; color: var(--ink); }
.usermenu__merole { font-size: 11.5px; color: var(--muted); }
/* Language switch inside the menu (mobile, where the topbar toggle is hidden). */
.usermenu__lang { display: none; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px 5px; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.usermenu__langlabel { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.langtoggle--menu { background: var(--parch-2); border-color: var(--line-soft); }
.langtoggle--menu button { color: var(--muted); }
.langtoggle--menu button:hover { color: var(--ink); }
.langtoggle--menu button.is-on { background: var(--ink); color: var(--parch); }

/* ---------- Setup (first-login PIN) ---------- */
.gate__skip { display: block; width: 100%; margin-top: 14px; background: none; border: none; color: var(--muted);
  font-size: 13px; font-weight: 600; text-decoration: underline; }
.gate__skip:hover { color: var(--ink-2); }

/* ---------- Role badge ---------- */
.rolebadge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  background: var(--parch-2); color: var(--bronze-ink); border: 1px solid var(--line-soft); }
.rolebadge[data-role="Management"] { background: color-mix(in oklch, var(--bronze) 14%, white); color: var(--bronze-ink); border-color: color-mix(in oklch, var(--bronze) 28%, white); }
.rolebadge[data-role="Design"] { background: color-mix(in oklch, var(--s-appr) 15%, var(--surface)); color: color-mix(in oklch, var(--s-appr) 70%, var(--ink)); border-color: color-mix(in oklch, var(--s-appr) 30%, var(--surface)); }
.rolebadge[data-role="Motion"] { background: color-mix(in oklch, var(--s-review) 14%, var(--surface)); color: color-mix(in oklch, var(--s-review) 70%, var(--ink)); border-color: color-mix(in oklch, var(--s-review) 30%, var(--surface)); }
.rolebadge[data-role="Copywriting"] { background: color-mix(in oklch, var(--s-prod) 16%, var(--surface)); color: color-mix(in oklch, var(--s-prod) 78%, var(--ink)); border-color: color-mix(in oklch, var(--s-prod) 32%, var(--surface)); }
.rolebadge[data-role="Production"] { background: color-mix(in oklch, var(--s-done) 14%, var(--surface)); color: color-mix(in oklch, var(--s-done) 70%, var(--ink)); border-color: color-mix(in oklch, var(--s-done) 30%, var(--surface)); }
.rolebadge[data-role="Account"] { background: var(--parch-2); color: var(--ink-2); border-color: var(--line-soft); }

/* ---------- Home ---------- */
.home { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 8px 16px 96px; }
/* GOBIMANS-429: .home__hero / __mark / __title / __lead убраны вместе с разметкой баннера. */
.home__greet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 4px 6px; }
.home__hi { font-size: 16px; }
.home__date { color: var(--muted); font-size: 13px; margin-left: auto; text-transform: lowercase; }

.home__nav { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px; margin-top: 6px; }
/* GOBIMANS-429: плитка перестала быть карточкой с hero-числом. Была min-height 116px, padding 16
   и цифра в 28px — четыре таких в ряд читались как «карточная сетка ради сетки», а на 390px шли
   в столбик по 116px и уводили «Сводку» на третий экран. Осталась навигация со счётчиком. */
.htile { text-align: left; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--e-1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.htile:hover { border-color: var(--bronze-2); box-shadow: var(--e-2); transform: translateY(-1px); }
.htile:active { transform: translateY(0); }
.htile__k { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.htile__n { font-size: 19px; font-weight: 800; color: var(--bronze-ink); line-height: 1; margin-top: 1px; }
.htile__sub { font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.4; }
.htile--hero { background: var(--parch-2); }
.htile--hero .htile__k { color: var(--bronze-ink); }
.htile__big { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; margin-top: 2px; display: flex; align-items: baseline; gap: 8px; }
.htile__big i { font-size: 12px; font-weight: 600; font-style: normal; color: var(--muted); }

/* First-run onboarding card (GOBIMANS-186) — dismissible pointer to the hidden #help guide. */
.onboard { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--bronze); border-radius: var(--radius); box-shadow: var(--e-1); }
.onboard__t { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.onboard__d { font-size: 13px; color: var(--ink-2); flex: 1 1 260px; }
.onboard__act { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 720px) { .onboard { flex-direction: column; align-items: stretch; } .onboard__d { flex: 1 1 auto; } /* GOBIMANS-349: basis 260px в колонке раздувал карточку на 260px высоты */ .onboard__act { justify-content: stretch; } .onboard__act .btn { flex: 1; justify-content: center; } }

/* GOBIMANS-149: contractor first-run checklist — vertical variant of the onboarding card. */
.onboard--list { flex-direction: column; align-items: stretch; gap: 10px; }
.onboard--list .onboard__d { flex: 1 1 auto; }
.onboard__steps { display: flex; flex-direction: column; gap: 6px; }
.onboard__step { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 0;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--parch-2); color: var(--ink); font-size: 13.5px; line-height: 1.4; }
button.onboard__step { cursor: pointer; transition: border-color .12s, background .12s; }
button.onboard__step:hover { border-color: var(--bronze); background: var(--surface); }
.onboard__step--info { background: transparent; }
.onboard__num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--bronze); color: var(--surface); font-weight: 700; font-size: 12px; }
.onboard__step--info .onboard__num { background: var(--parch-3); color: var(--bronze-ink); }
.onboard__stxt { flex: 1 1 auto; min-width: 0; }
.onboard__go { flex: 0 0 auto; color: var(--bronze-ink); font-weight: 700; }
@media (max-width: 720px) { .onboard--list .onboard__act .btn { flex: 1; justify-content: center; } }

.home__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 12px; align-items: start; }
.hpanel { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; box-shadow: var(--e-1); }
.hpanel__t { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 10px; }
.hstat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.hstat:last-of-type { border-bottom: none; }
.hstat span { color: var(--muted); }
.hstat b { font-weight: 700; font-size: 15px; }
.hpanel__link { margin-top: 10px; background: none; border: none; color: var(--bronze-ink); font-weight: 700; font-size: 13.5px; padding: 4px 0; }
.hpanel__link:hover { text-decoration: underline; }
/* Help / onboarding screen */
.helpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.helpcard__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--bronze); color: var(--surface); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.helpcard__b { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
/* Keyboard shortcuts list on the Help screen (GOBIMANS-153) */
.hkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 20px; margin-top: 4px; max-width: var(--content-max); }
.hkrow { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.hkrow__keys { flex: 0 0 auto; min-width: 54px; white-space: nowrap; }
.hkrow__lbl { color: var(--ink-2); font-size: 14px; }
kbd.hk__key { display: inline-block; min-width: 15px; text-align: center; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; background: var(--surface); color: var(--ink); font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.afeed { display: flex; flex-direction: column; }
.afeed__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.afeed__row:last-child { border-bottom: none; }
.afeed__ic { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; }
.afeed__ic--create { background: var(--tint-ok-bg); color: var(--tint-ok-ink); }
.afeed__ic--update { background: var(--tint-warn-bg); color: var(--tint-warn-ink); }
.afeed__ic--delete { background: var(--tint-bad-bg); color: var(--tint-bad-ink); }
.afeed__txt { min-width: 0; line-height: 1.4; }
.afeed__time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.afeed__empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* ---------- Journal ---------- */
.jfeed { max-width: var(--content-max); margin: 4px auto 96px; width: 100%; }
.jfeed__day { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  padding: 16px 0 6px; position: sticky; top: calc(var(--topbar-h)); background: var(--parch); }
.jrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); margin-bottom: 7px; }
.jrow__av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--parch-3); color: var(--bronze-ink); font-weight: 700; font-size: 11.5px; }
.jrow__body { min-width: 0; }
.jrow__txt { font-size: 14px; line-height: 1.45; }
.jrow__meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; text-transform: lowercase; }
.jrow__t { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.jrow--link { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.jrow--link:hover { border-color: var(--bronze-2); background: color-mix(in oklch, var(--bronze) 5%, var(--surface)); }
.jrow--link:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }
/* GOBIMANS-351: на десктопе мета встаёт в строку к тексту — запись занимает одну строку */
@media (min-width: 721px) {
  .jrow__body { display: flex; align-items: baseline; gap: 10px; }
  .jrow__txt { min-width: 0; }
  .jrow__meta { margin-top: 0; white-space: nowrap; flex: none; }
}
.jsel { margin-left: 2px; }

/* ---------- Access table ---------- */
.utable td { vertical-align: middle; }
/* GOBIMANS-271: Output per-person drilldown — expandable row + list of completed steps (deep-links) */
.urow--exp { cursor: pointer; }
.urow__caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; }
.udetail > td { background: var(--parch-2); padding: 0 !important; cursor: default; }
.udetail:hover > td { background: var(--parch-2); }
.odrill { display: flex; flex-direction: column; }
.odrill--loading, .odrill--empty { padding: 12px 16px; color: var(--muted); font-size: 13px; }
.odrill__item { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 10px; align-items: baseline;
  padding: 9px 16px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); font-weight: 500; }
.odrill__item:hover { background: var(--parch); }
.odrill__stage { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bronze-ink); font-weight: 700; }
.odrill__task { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odrill__proj { color: var(--muted); font-size: 12.5px; }
.odrill__dur { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* GOBIMANS-383 */
.odrill__date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pincode { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .12em;
  background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 8px; color: var(--ink); }
.utag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.utag--temp { background: var(--tint-warn-bg); color: var(--tint-warn-ink); border: 1px solid var(--tint-warn-line); }
.utag--admin { background: color-mix(in oklch, var(--bronze) 12%, white); color: var(--bronze-ink); border: 1px solid color-mix(in oklch, var(--bronze) 26%, white); }
.utag--on { background: var(--tint-ok-bg); color: var(--tint-ok-ink); border: 1px solid var(--tint-ok-line); }
.utag--off { background: var(--parch-2); color: var(--muted); border: 1px solid var(--line-soft); }
.utable-wrap { max-width: var(--content-max); margin: 8px auto 8px; width: calc(100% - 32px); overflow-x: auto;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e-1); }

.pinrow { display: flex; gap: 6px; align-items: stretch; }
.pinrow input { flex: 1 1 auto; }
.pinrow .btn--chip { flex: 0 0 auto; }

@media (max-width: 720px) {
  /* Topbar collapses to: brand · project · search · ☰ menu. Nav + language live in the menu.
     GOBIMANS-182: this rule targeted the old .topbar class (renamed to .topstrip) and had
     gone dead — the tighter mobile gap/padding below was never actually applying. */
  .topstrip { gap: 8px; padding: 0 10px; }
  .brand__mark { font-size: 15px; }
  /* GOBIMANS-403 (аудит 4.4, находки 6.10, 6.11). Шапка на 390 px была сломана сразу в трёх местах:
     блок пользователя исчезал целиком (человек не видел, под кем вошёл, а выход прятался в кнопке
     «⋯», которую резал край экрана), рядом висел бейдж `⌘K` — клавиатурная подсказка на телефоне, —
     и всё это при высоте кнопок 34–36 px против нормы тач-цели в 44.

     Решение: на телефоне остаётся аватар, а глиф «⋯» уходит. Он и заводился (GOBIMANS-196) только
     потому, что аватар с именем считались десктопными; аватар и есть ответ на «под кем я вошёл», и
     он же — кнопка с выходом. Имя и роль целиком лежат первой строкой внутри меню (.usermenu__me),
     где для них есть ширина. Один орган вместо двух, ничего не режется краем. */
  .userbtn { padding: 3px 5px; min-height: 44px; }
  .userbtn .picker__chev { display: none; }
  .usermeta { display: none; }
  .userbtn__burger { display: none; }
  .userbox { margin-left: auto; }
  .usermenu__me { display: flex; }
  .usermenu__item { padding: 12px 12px; }   /* 44px тач-цель в меню аккаунта */
  .usermenu__lang { display: flex; }
  /* ⌘K на телефоне не нажать — клавиатуры нет; поиск при этом остаётся. */
  .topsearch__cmdk { display: none; }
  /* 44px тач-цели у остальных органов шапки (были 34–36). Селектор с .topstrip — потому что
     базовое правило .drawerbtn лежит ниже по файлу, в секции рельса, а медиазапрос специфичность
     не повышает: без этого 34 px просто выигрывали бы по порядку. */
  .topstrip .drawerbtn, .topstrip .bell { width: 44px; height: 44px; }
  .picker { flex-shrink: 0; }   /* identify the open project before letting search grow */
  .picker__btn { min-width: 0; min-height: 44px; }
  .picker__name { max-width: 40vw; }
  /* GOBIMANS-403 (находка 6.11): у селектора в заголовке экрана подпись остаётся. В тулбаре доски
     подписи скрыты намеренно (там их четыре в ряд), но «Кто» над списком имён — единственное, что
     объясняет, чей это список; без неё между заголовком и подсказкой висит голое имя. */
  .vhead .selwrap span { display: inline; }
  /* form controls ≥16px so iOS doesn't auto-zoom the page on focus */
  input, select, textarea { font-size: 16px; }
  /* a11y: comfortable tap targets for the tiny icon buttons (✕, search-clear) */
  .xbtn, .topsearch__x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* GOBIMANS-403 (аудит 4.10, находка 6.25): переключатель «Доска / Список» был 26–28 px — самый
     мелкий элемент экрана при том, что это главный орган управления доской. Тот же .vtoggle несёт
     горизонт «Загрузки» (4 / 8 / 12 недель), ему это ровно так же нужно. */
  .vtoggle__b { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  /* GOBIMANS-154: keep the top-strip Back compact on mobile — icon only, 40px tap target */
  .topstrip__back .backbtn__lab { display: none; }
  .topstrip__back { min-width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .hstat { flex-wrap: wrap; }
  .hstat b { margin-left: auto; }
  /* GOBIMANS-429: три вторичные плитки — один ряд из трёх, а не блок 2×2. «Проекты» несут
     активный проект и процент, поэтому остаются во всю ширину. */
  .home__nav { grid-template-columns: 1fr 1fr 1fr; }
  .htile--hero { grid-column: 1 / -1; }
  .home__cols { grid-template-columns: 1fr; }
  .home__date { width: 100%; margin-left: 0; }
}
@media (max-width: 600px) {
  /* GOBIMANS-30 mobile polish: stack paired modal fields + finance cards; rrow meta on its own line */
  .detail__grid { grid-template-columns: 1fr; }
  /* GOBIMANS-428: было `1fr` — четыре числа в столбик, 368px. Два на два: те же числа за 2 строки
     вместо 4, и полоса перестаёт быть тем, что стоит между владельцем и его реестром. */
  .finsum { grid-template-columns: 1fr 1fr; }
  .finsum__c:nth-child(odd) { border-left: none; }
  .finsum__c:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .rrow { flex-wrap: wrap; gap: 4px 10px; }
  .rrow__link { flex-wrap: wrap; row-gap: 2px; }   /* title / source / next-action stack instead of overflowing */
  .rrow__title { min-width: 0; max-width: 100%; }
  /* GOBIMANS-428: `flex-wrap` стоял только на строке идеи. У остальных строк мета-линия молча
     обрезалась правым краем — на «Деньгах» это видно как «+2 400 EUR чер», обрубленный статус.
     Раньше это было незаметно, потому что до первой записи на 390px надо было пролистать
     полтора экрана. Правило одно на все строки: дата, сумма и статус переносятся, а не исчезают. */
  .rrow__meta { width: 100%; justify-content: flex-start; padding-left: 24px; flex-wrap: wrap; row-gap: 6px; }
  .idea-composer { flex-wrap: wrap; }
  .idea-composer input { flex-basis: 100%; }
  /* page headers: action buttons drop below the title instead of clipping off the right edge */
  .vhead { flex-wrap: wrap; row-gap: 8px; }
  .vhead__t { font-size: 21px; flex: 1 1 100%; }
  /* GOBIMANS-432: одна раскладка для КАЖДОЙ таблицы «запись в строке», которая не влезает в 390px.
     Раньше стопку получала только `.utable`, и каждая ячейка занимала свою строку: четыре коротких
     факта о человеке (имя, роль, PIN, статус) разворачивались в карточку на 134px, шесть человек —
     800px. `.pltable` («Сводка месяца» на «Выплатах») не получала ничего и просто обрезалась
     посреди колонки: «СТАТУС» уезжал за правый край, «копится» превращалось в «копи».
     Теперь строка — блок, первая ячейка в ней заголовок, остальные текут инлайном парами
     «подпись: значение». Подпись берётся из `data-th`, потому что `thead` на мобиле скрыт, а
     «НАКОПЛЕНО» и «НАЛОГ» сами себя не называют — в отличие от имени и роли. */
  .utable thead, .pltable thead { display: none; }
  .utable, .utable tbody, .pltable, .pltable tbody { display: block; width: 100%; }
  .utable tr, .pltable tr {
    display: flex; flex-wrap: wrap; gap: 1px 12px; align-items: baseline; width: 100%;
    padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  }
  .utable tr:last-child, .pltable tr:last-child { border-bottom: none; }
  .utable td, .pltable td { display: inline-flex; align-items: baseline; gap: 5px; width: auto; padding: 0; border: none; }
  .utable td:first-child, .pltable td:first-child { flex: 1 1 100%; font-weight: 700; }
  /* базовое правило выравнивает числовые колонки вправо (.pltable td:not(:first-child)) — в стопке
     это разрывало пару «подпись: значение», поэтому здесь тот же селектор, а не !important */
  .pltable td:not(:first-child) { text-align: left; }
  .utable td:empty, .pltable td:empty { display: none; }
  .pltable td[data-th]::before {
    content: attr(data-th) ":"; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600;
  }
  .utable td:nth-child(4), .utable td:nth-child(5) { display: none; }   /* права / доступ: low value on mobile */
  .utable .pincode { font-size: 15px; }
  /* tabs + board/list toggle: scroll the row instead of letting the toggle overlap the tabs */
  .viewnav { overflow-x: auto; scrollbar-width: none; }
  .viewnav::-webkit-scrollbar { display: none; }
  .vtoggle { margin-left: 8px; flex: 0 0 auto; }
}
@media (max-width: 460px) {
  .home__nav { grid-template-columns: 1fr; }
}

/* ---------- Top search ---------- */
.topsearch { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 150px; max-width: 360px;
  padding: 0 10px; height: 34px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }
.topsearch:focus-within { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.topsearch__ic { color: var(--bronze-2); font-size: 15px; flex: 0 0 auto; }
.topsearch input { flex: 1 1 auto; min-width: 0; background: none; border: none; outline: none;
  color: var(--parch); font-family: inherit; font-size: 14px; }
.topsearch input::placeholder { color: rgba(255,255,255,.66); }
.topsearch input::-webkit-search-cancel-button { display: none; }
.topsearch__x { border: none; background: none; color: rgba(255,255,255,.6); font-size: 12px; padding: 2px 4px; border-radius: 6px; flex: 0 0 auto; }
.topsearch__x:hover { color: var(--parch); }

/* search results */
.sgroup { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--e-1); }
.sgroup__h { padding: 10px 16px; background: var(--parch-2); font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line-soft); }
.sgroup__n { font-size: 12px; color: var(--muted); font-weight: 600; }
.sres { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 16px;
  background: none; border: none; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink);
  transition: background var(--t-fast) var(--ease); }
.sres:last-child { border-bottom: none; }
.sres:hover { background: var(--parch); }
.sres__t { font-weight: 600; font-size: 14px; }
.sres__m { font-size: 12px; color: var(--muted); }

/* ---------- Demo banner ---------- */
.demobar { display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  background: var(--tint-warn-bg); color: #6F4A28; border-bottom: 1px solid var(--tint-warn-line); }
.demobar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--u-warn); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(201,151,79,.2); }
.demobar__txt { flex: 1 1 auto; }
.demobar b { font-variant-numeric: tabular-nums; }
.demobar__btn { flex: 0 0 auto; border: 1px solid var(--tint-warn-line); background: var(--tint-warn-bg); color: var(--tint-warn-ink); font-weight: 700;
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px; }
/* GOBIMANS-364: same class of bug — a white hover under --tint-warn-ink, which is a pale oklch in
   the dark theme, i.e. near-white text on white. Lean on the tint's own line colour instead. */
.demobar__btn:hover { background: var(--tint-warn-line); }

@media (max-width: 720px) {
  .topsearch { flex-basis: 110px; min-width: 0; max-width: none; height: 32px; }
  .demobar { font-size: 12px; }
  .demobar__txt { line-height: 1.3; }
}
/* GOBIMANS-403 (аудит 4.4, находка 6.10). На 390 px верхняя строка несёт шесть органов сразу:
   меню, проект, поиск, статус, колокол, аккаунт. При норме тач-цели 44 px они физически не
   помещаются — именно поэтому кнопка аккаунта уезжала за край, а строка поиска ужималась до 22 px,
   то есть до неработающей полоски. Значит, один из шести должен уйти, и это поиск: он единственный,
   у кого есть второй вход. На узком экране он переезжает в меню аккаунта — тем же приёмом, каким
   там уже живёт переключатель темы (.usermenu__lang), скрытый на десктопе. Остальное остаётся
   на месте и в норме 44 px, а названию проекта наконец хватает ширины. */
@media (max-width: 560px) {
  .topsearch { display: none; }
  .usermenu__item--mobile { display: block; }
  /* И точка состояния системы: 8 px пассивной диагностики, из-за которой не влезала кнопка
     аккаунта. Она же и была тем, что «налезало поверх глифа» в находке 6.10 — на телефоне
     ей просто нет места рядом с органами, по которым нажимают. */
  .healthbox { display: none; }
  /* Освободившееся достаётся названию проекта: не фиксированные 33vw, при которых оно
     обрезалось до «ЕНСВ — Сез...», а весь остаток строки после кнопок (находка 6.9). */
  .picker { flex: 1 1 auto; min-width: 0; }
  /* 15px вместо 17: «EHCB — Season 2 (2025/26)» целиком укладывается в остаток строки, а именно
     номер сезона и был тем, что нельзя было прочитать. */
  .picker__name { max-width: none; font-size: 15px; }
  .topstrip__sp { display: none; }   /* распорку заменил сам переключатель проекта */
}

/* ---------- v2: «Моё» accent in topbar nav ---------- */
.gbtn--accent { background: color-mix(in oklch, var(--orange) 26%, transparent); color: var(--parch); }
.gbtn--accent:hover { background: color-mix(in oklch, var(--orange) 40%, transparent); }
.gbtn--accent.is-on { background: var(--parch); color: var(--ink); }

/* ---------- v2: board / list toggle (in the project nav) ---------- */
.vtoggle { margin-left: auto; display: inline-flex; gap: 2px; align-self: center; padding: 3px;
  background: var(--parch-2); border: 1px solid var(--line-soft); border-radius: 999px; }
.vtoggle__b { border: none; background: none; border-radius: 999px; padding: 5px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.vtoggle__b.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- v2: Kanban board ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding: 12px 16px 40px;
  max-width: var(--content-max); margin: 0 auto; width: 100%; align-items: stretch; scroll-snap-type: x proximity;
  /* GOBIMANS-272: bound the board to the viewport so each column's own .kcol__body becomes the
     vertical scroll container (was a page scroll, which carried the headers off-screen). Columns
     stretch to this height; their bodies scroll internally and the headers stay pinned above them. */
  height: calc(100dvh - var(--topbar-h) - var(--kanban-chrome)); }
.kcol { flex: 1 1 240px; max-width: 460px; scroll-snap-align: start; background: var(--parch-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 0; }   /* GOBIMANS-272: allow the flex child (.kcol__body) to shrink and scroll */
/* GOBIMANS-272: the header sits above the scrolling .kcol__body, so it stays fixed at the top of the
   column while the tasks scroll. sticky top:0 + the column bg + a hairline keep it clean over the
   cards that scroll beneath it. (Supersedes the GOBIMANS-199 note that dropped a then-dead sticky.) */
.kcol__h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; position: sticky; top: 0; z-index: 2; background: var(--parch-2);
  border-bottom: 1px solid var(--line-soft); border-radius: var(--radius) var(--radius) 0 0; }
.kcol__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.kcol__n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px; }
.kcol__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* GOBIMANS-113: per-column collapse toggle */
.kcol__collapse { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 6px; min-width: 22px; height: 22px; font-size: 12px; line-height: 1; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.kcol__collapse:hover { border-color: var(--bronze); color: var(--bronze-ink); background: var(--parch); }
.kcol__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px; overflow-y: auto;
  flex: 1 1 auto; border-radius: 0 0 var(--radius) var(--radius); transition: background var(--t-fast) var(--ease); }
.kcol__body.is-drop { background: color-mix(in oklch, var(--bronze) 12%, transparent); outline: 2px dashed color-mix(in oklch, var(--bronze) 40%, transparent); outline-offset: -4px; }
/* GOBIMANS-220: insertion indicator — a thin accent line slid between cards during drag to show
   exactly where the card will land. Flush-height (margin eats the column gap) so inserting it
   barely shifts the cards, keeping the dragover position stable. */
.kdrop-line { height: 3px; flex: 0 0 3px; margin: -3px 0; border-radius: 2px; background: var(--bronze);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--bronze) 35%, transparent); pointer-events: none; }
.kcol__add { border: 1px dashed var(--line); background: none; border-radius: var(--radius-sm); padding: 7px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: left; }
.kcol__add:hover { background: var(--surface); color: var(--bronze-ink); }
/* R2: пустые колонки остаются полноразмерными — свежая доска читается как доска, а не как ряд узких заглушек */
.kcol--empty { flex: 1 1 240px; opacity: 1; }
.kcol--empty .kcol__h { font-size: 13.5px; padding: 11px 13px; }
/* GOBIMANS-351: на живой доске пустые колонки ужимаются в заглушки и отдают ширину полным
   (перекрывает R2 для этого случая); совсем пустая доска остаётся полноразмерной. */
.kcol--slim { flex: 0 0 132px; }
.kcol--slim .kcol__collapse { display: none; }
.kcol--slim .kcol__add { text-align: center; font-size: 12px; }
/* GOBIMANS-113: collapsed column — slim ~44px strip, only the header (name + count) shows, vertical label */
.kcol--collapsed { flex: 0 0 44px; max-width: 44px; cursor: pointer; overflow: hidden; }
.kcol--collapsed .kcol__h { flex-direction: column; align-items: center; height: 100%; padding: 11px 6px; gap: 10px; white-space: nowrap; }
.kcol--collapsed .kcol__name { writing-mode: vertical-rl; text-orientation: mixed; flex: 1 1 auto;
  min-height: 0; max-height: 100%; overflow: hidden; text-overflow: ellipsis; }
.kcol--collapsed .kcol__n { margin-left: 0; }
.kcol--collapsed:hover { background: var(--parch); }
.kcol__more { border: none; background: var(--surface); border-radius: var(--radius-sm); padding: 8px;
  color: var(--bronze-ink); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast); }
.kcol__more:hover { background: var(--parch); }
/* Soft WIP-limit warning (GOBIMANS-114): terracotta tint on an over-limit column — never blocks moves. */
.kcol--over .kcol__h { color: var(--terra); }
.kcol__n--over { color: var(--terra); background: color-mix(in oklch, var(--terra) 14%, var(--surface));
  border-color: color-mix(in oklch, var(--terra) 40%, var(--line-soft)); }
.kcol--over { box-shadow: inset 0 2px 0 0 var(--terra); }

/* WIP-limit inputs in the project settings dialog */
.wipset { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; }
.wipset legend { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 0 4px; }
.wipset__hint { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.wipset__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.field--sm input { padding: 6px 8px; }
@media (max-width: 560px) { .wipset__grid { grid-template-columns: repeat(2, 1fr); } }
.kcard { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; cursor: grab; box-shadow: var(--e-1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.kcard:hover { border-color: var(--bronze-2); box-shadow: var(--e-2); }
/* GOBIMANS-230: board multi-select checkbox — hover-revealed on desktop, always tappable on touch
   (no hover), always shown once the card is selected. It's a distinct tap target so it never
   collides with the long-press drag (GOBIMANS-229). */
.kc__sel { position: absolute; top: 7px; right: 8px; width: 17px; height: 17px; margin: 0; z-index: 3;
  cursor: pointer; accent-color: var(--bronze); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.kcard:hover .kc__sel, .kcard.is-selected .kc__sel { opacity: 1; }
@media (hover: none) { .kc__sel { opacity: 1; } }
.kcard.is-selected { border-color: var(--bronze); box-shadow: 0 0 0 2px color-mix(in oklch, var(--bronze) 32%, transparent), var(--e-1); }
.kcard.is-dragging { opacity: .6; transform: rotate(1.5deg) scale(1.02); cursor: grabbing; box-shadow: var(--e-drag); }
/* GOBIMANS-229: while a touch long-press drag is lifted, freeze the board's own scrolling (we
   scroll it manually via edge auto-scroll) and stop text selection under the finger. */
body.is-kdrag { user-select: none; -webkit-user-select: none; }
body.is-kdrag .kanban, body.is-kdrag .kcol__body { touch-action: none; overscroll-behavior: contain; }
.kc__top { display: flex; align-items: center; gap: 7px; }
.kc__title { font-weight: 600; font-size: 13.5px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.kc__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* GOBIMANS-270: executor-chain progress bar on the board card — segmented, one cell per step,
   filled as steps complete. Purely visual (no counts); the active step gets the brand accent. */
.chbar { display: flex; gap: 3px; margin: 7px 0 1px; }
.chbar__seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--line);
  transition: background var(--t-fast); }
.chbar__seg--done { background: var(--s-done); }
.chbar__seg--active { background: var(--bronze); box-shadow: 0 0 0 1px color-mix(in oklch, var(--bronze) 35%, transparent); }
.chbar__seg--pending { background: var(--line); opacity: .55; }
.kc__who { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--bronze); color: var(--surface); font-size: 10px; font-weight: 700; margin-left: auto; }
.kc__cmt { font-size: 11.5px; font-weight: 600; color: var(--muted); }
/* touch-friendly stage move (GOBIMANS-115) */
.kc__move { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 7px; min-width: 26px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.kc__move:hover { border-color: var(--bronze); color: var(--bronze-ink); background: var(--parch); }
.kmenu { position: fixed; z-index: 60; min-width: 184px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--e-3); padding: 5px; }
.kmenu__h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 6px; }
.kmenu__i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 9px 9px; border-radius: 6px; cursor: pointer; }
.kmenu__i:hover:not([disabled]) { background: var(--parch-2); }
.kmenu__i.is-cur { color: var(--muted); cursor: default; }
.kmenu__i.is-locked { color: var(--muted); cursor: not-allowed; opacity: .7; }   /* GOBIMANS-228: leadership-only status */
.kmenu__i.is-locked .kmenu__here { color: var(--bronze); }
.kmenu__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.kmenu__here { margin-left: auto; font-size: 10.5px; color: var(--muted); }
@media (max-width: 720px) { .kc__move, .kc__menu { min-width: 44px; height: 44px; } .kmenu__i { padding: 11px 10px; } }   /* GOBIMANS-199: 44×44 touch-target minimum */
/* «…» kanban-card menu (GOBIMANS-251): delete / duplicate / snooze / reassign */
.kc__menu { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 7px; min-width: 26px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.kc__menu:hover { border-color: var(--bronze); color: var(--bronze-ink); background: var(--parch); }
.kmenu--card { min-width: 220px; }
.kmenu__sep { height: 1px; background: var(--line-soft); margin: 5px 6px; }
.kmenu__row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 8px 6px; }
.kmenu__input { display: block; width: calc(100% - 16px); margin: 0 8px 6px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.kmenu__i--danger:hover:not([disabled]) { background: var(--tint-bad-bg); color: var(--tint-bad-ink); }
.kc__cmt { display: inline-flex; align-items: center; gap: 3px; }
.kc__cmt--unread { color: var(--bronze-ink); font-weight: 700; }
.kc__unread { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--u-hot); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
/* «срочно» pin badge (GOBIMANS-118) */
.kc__urgent { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--u-hot); border-radius: 4px; padding: 1px 5px; line-height: 1.5; }
.kcard--urgent { border-color: color-mix(in oklch, var(--u-hot) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--u-hot) 22%, transparent), var(--e-1); }
/* inline title rename (GOBIMANS-99) */
.inledit { flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1.3;
  padding: 2px 6px; border: 1px solid var(--bronze); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.inledit:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.item__title .inledit, .item__titlerow .inledit { font-size: 15px; }

/* ---------- v2: comments thread (in task detail) ---------- */
.cmts { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 12px; }
/* GOBIMANS-403 (аудит 4.10, находка 6.25): один регистр с соседями по карточке — .tzone > summary,
   .field span, .ro__lbl. Разнобой был виден в одном кадре: `DISCUSSION` против `Task history`. */
.cmts__h { font-size: 12.5px; letter-spacing: .01em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.cmts__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cmts__empty { color: var(--muted); font-size: 13px; }
.cmt { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; }
.cmt__av { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--parch-3); color: var(--bronze-ink); font-weight: 700; font-size: 11px; }
.cmt__meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); }
.cmt__meta b { color: var(--ink); font-size: 13px; }
.cmt__text { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cmts__new { display: flex; gap: 8px; align-items: flex-end; }
.cmts__new textarea { flex: 1 1 auto; font-family: inherit; font-size: 14px; color: var(--ink); resize: vertical;
  min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface); }
.cmts__new textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.cmts__new .btn { flex: 0 0 auto; }

/* ---------- v2: «Моё» rows ---------- */
.rrow--mine { cursor: pointer; }
.rrow--mine:hover { background: var(--parch); }
.mdot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

@media (max-width: 720px) {
  .vtoggle { margin-left: 0; }
  /* GOBIMANS-272: on phones keep the whole board as one page scroll (nested vertical scroll inside a
     horizontally-swiped board is poor touch UX) — revert the desktop viewport-height cap. */
  .kanban { padding: 10px 10px 96px; height: auto; min-height: calc(100dvh - var(--topbar-h) - var(--kanban-chrome)); }
  .kcol { flex-basis: 82vw; max-height: none; }
  .kcol__h { position: static; }
  .kcol--empty { flex: 0 0 96px; }   /* заглушки остаются узкими и на мобиле */
  .kcol--collapsed { flex: 0 0 46px; max-width: 46px; }   /* GOBIMANS-113: свёрнутая колонка — узкая полоса и на мобиле */
}

/* ---------- v3: language toggle (topbar + gate) ---------- */
.langtoggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex: 0 0 auto;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }
.langtoggle button { border: none; background: none; border-radius: 999px; padding: 4px 9px;
  font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.65);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.langtoggle button:hover { color: var(--parch); }
.langtoggle button.is-on { background: var(--parch); color: var(--ink); }
.langtoggle--gate { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  background: var(--surface); border-color: var(--line); }
.langtoggle--gate button { color: var(--muted); }
.langtoggle--gate button:hover { color: var(--ink); }
.langtoggle--gate button.is-on { background: var(--ink); color: var(--parch); }

/* ---------- v3: inline task composer (replaces prompt) ---------- */

/* ---------- v3: task modal (kanban edit-in-place) ---------- */
.dlg--task .dlg__card { width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; padding: 18px 22px 22px; }
.taskcard__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.taskcard__proj { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--bronze-ink);
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskcard__x { font-size: 15px; padding: 8px 10px; }
.taskcard__del { font-size: 14px; padding: 8px 10px; }   /* GOBIMANS-251: view-mode delete, next to close */
/* GOBIMANS-154: visible Back on a cross-screen task card (returns to the origin screen) */
.taskcard__back { flex: none; height: 30px; padding: 0 9px 0 6px; color: var(--bronze-ink);
        font-size: 13px; font-weight: 600; line-height: 1;
        transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.taskcard__back:hover { background: var(--parch-2); color: var(--ink); }
.taskcard__back .backbtn__ic { font-size: 18px; line-height: 1; }
.dlg--task .item { border: none; background: none; }
.dlg--task .item:hover { background: none; }
.dlg--task .item__detail { padding: 10px 0 0; }

/* ---------- v3: project settings + archive ---------- */
/* GOBIMANS-294: project actions are text chips now; wrap to a second line on narrow headers */
.eh__actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.archtag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--parch-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.eh__top { position: relative; }

/* ---------- v3: edit pencil (docs rows etc.) ---------- */
.ebtn:hover { background: var(--parch-2); color: var(--bronze-ink); }

/* ---------- v3: comment delete ---------- */
.cmt__x { font-size: 11px; padding: 1px 5px; opacity: 0; transition: opacity var(--t-fast) var(--ease); margin-left: auto; }
.cmt:hover .cmt__x, .cmt__x:focus-visible { opacity: 1; }
.cmt__meta { width: 100%; }

/* ---------- v3: project checkbox list (user access) ---------- */
.cklist { display: grid; gap: 2px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: var(--surface); }
.ckrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.ckrow:hover { background: var(--parch-2); }
.ckrow input { accent-color: var(--bronze); width: 15px; height: 15px; }

/* ---------- v3: first-task empty state ---------- */
.vempty--start { display: grid; gap: 14px; justify-items: center; }
.vempty--start p { margin: 0; max-width: 46ch; }
.vempty--start .composer { width: min(380px, 100%); text-align: left; }

/* ---------- v3: client card → board ---------- */
.tcard__chevbtn { display: grid; place-items: center; padding: 6px; border-radius: 8px; }
.tcard__chevbtn:hover { background: var(--parch-2); }
.tcard__board { align-self: flex-start; margin-bottom: 10px; }

@media (max-width: 720px) {
  .langtoggle { order: 2; }
  .langtoggle button { padding: 4px 7px; font-size: 10.5px; }
  /* GOBIMANS-201: full-screen sheet instead of a centered 94vw/92vh modal — one scroll
     container (.dlg__card itself), no nested scroll region, no rounded corners floating
     mid-screen. The dialog element's own UA max-width/max-height (~100%-6px) would otherwise
     clip a 100vw/100dvh card by a few px, so it's overridden here too. */
  .dlg--task { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; }
  .dlg--task .dlg__card {
    width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
    border: none; border-radius: 0; margin: 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

/* ---------- v4: ⌘K hint in top search ---------- */
.topsearch__cmdk { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7); font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  border-radius: var(--r-xs); padding: 3px 6px; line-height: 1; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.topsearch__cmdk:hover { background: rgba(255,255,255,.18); color: var(--parch); }

/* ---------- v4: ⌘K command palette ---------- */
.cmdk { border: none; background: transparent; padding: 0; max-width: 100vw; max-height: 100vh; overflow: visible; }
.cmdk::backdrop { background: oklch(0.20 0.05 265 / .40); backdrop-filter: blur(2px); }
.cmdk[open] { animation: fade-in var(--t-fast) var(--ease); }
.cmdk__box { position: fixed; top: 11vh; left: 50%; transform: translateX(-50%);
  width: min(620px, 94vw); max-height: 72vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-4); overflow: hidden; animation: pop-in var(--t-base) var(--ease); }
.cmdk__inputrow { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.cmdk__ic { color: var(--muted); font-size: 17px; flex: 0 0 auto; }
.cmdk__input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 16px; color: var(--ink); letter-spacing: var(--tk-tight); }
.cmdk__input::placeholder { color: var(--muted); }
.cmdk__esc { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 3px 6px; background: var(--parch-2); flex: 0 0 auto; }
.cmdk__list { overflow-y: auto; padding: 6px; flex: 1 1 auto; }
.cmdk__sec { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: 11px 10px 4px; }
.cmdk__row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none;
  background: none; border-radius: var(--r-sm); text-align: left; cursor: pointer; color: var(--ink);
  scroll-margin: 8px; }
.cmdk__row.is-active { background: var(--parch-2); }
.cmdk__row.is-active .cmdk__rico { background: color-mix(in oklch, var(--bronze) 16%, var(--surface)); color: var(--bronze-ink); }
.cmdk__rico { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-xs); background: var(--parch-2); font-size: 13px; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cmdk__rt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk__rlabel { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__rlabel b { color: var(--bronze-ink); font-weight: 700; }
.cmdk__rhint { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__rkind { font-size: 10.5px; font-weight: 600; color: var(--muted); flex: 0 0 auto; text-transform: lowercase; }
.cmdk__empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.cmdk__foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--muted); }
.cmdk__foot b { font-weight: 800; color: var(--ink-2); font-family: inherit; }
@media (max-width: 600px) {
  .cmdk__box { top: 0; left: 0; transform: none; width: 100vw; height: 100%; max-height: 100vh; border-radius: 0; border: none; }
  .cmdk__input { font-size: 16px; }
}

/* ---------- v4: modern empty states ---------- */
.estate { max-width: 420px; margin: 8vh auto; padding: 0 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.estate__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-lg);
  background: color-mix(in oklch, var(--bronze) 9%, var(--surface)); border: 1px solid color-mix(in oklch, var(--bronze) 18%, var(--surface));
  font-size: 26px; margin-bottom: 2px; }
/* justify-items:center sizes grid children to max-content, so a long title or a query echoed
   into the body used to run past the viewport instead of wrapping (~390px). Cap every child at
   the track width and let unbreakable strings (URLs, long names) break. */
.estate > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.estate__t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.estate__b { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: min(38ch, 100%); }
.estate__act { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   R2 + polish (GOBIMANS-90): one-row toolbar · tactility · undo · avatars
   ============================================================ */

/* Toolbar: search inline in the one row, «Фильтры ▾» reveals the rest */
.toolbar__row--meta { margin-top: 8px; }
.toolbar__row--meta .search { width: auto; flex: 1 1 260px; min-width: 180px; margin: 0; }
.toolbar__more { margin-top: 8px; }
#filtersBtn .chev { display: inline-block; transition: transform var(--t-fast) var(--ease); }
#filtersBtn.is-on { background: var(--ink); border-color: var(--ink); color: var(--parch); }
#filtersBtn.is-on .chev { transform: rotate(180deg); }
/* GOBIMANS-350: тот же паттерн «Фильтры ▾» в журнале */
#filtersBtn .fchip__n { margin-left: 5px; }
#jMore .chev { display: inline-block; transition: transform var(--t-fast) var(--ease); }
#jMore.is-on .chev { transform: rotate(180deg); }

/* Tactility — hover/press feedback on every interactive surface (focus ring is already global) */
.gbtn, .vtab, .vtoggle__b, .picker__btn, .kcol__add, .fchip, .bell, .userbtn, .htile, .tcard, .langtoggle button {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform .05s var(--ease);
}
.gbtn:active, .vtoggle__b:active, .picker__btn:active, .kcol__add:active,
.fchip:active, .bell:active, .userbtn:active, .btn--chip:active, .langtoggle button:active { transform: translateY(1px); }
.kcard:not(.is-dragging):hover { transform: translateY(-1px); }   /* subtle lift, never during drag */

/* Undo toast — message + «Отменить» inside the Carbon pill */
.toast { display: inline-flex; align-items: center; gap: 14px; }
.toast__undo { background: none; border: 0; padding: 2px; cursor: pointer; font: inherit; font-weight: 700; color: var(--bronze-2); }
.toast__undo:hover { color: var(--parch); text-decoration: underline; }

/* Per-person avatars get their colour inline (personColor); keep initials legible */
.kc__who { color: #fff; }

/* «Сегодня» — focus feed on home (GOBIMANS-92) */
.home__today { margin: 4px 0 10px; }
.today__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin: 0 0 10px; }
.today__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
/* GOBIMANS-378: спокойный день — это сообщение, а не отсутствие блока. */
.today__calm { margin: 0; padding: 14px 2px; color: var(--muted); font-size: 13.5px; }
.today__grp { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 10px 8px; border-top: 3px solid var(--line); box-shadow: var(--e-1); }
.today__grp--overdue { border-top-color: var(--u-hot); }
.today__grp--due { border-top-color: var(--orange); }
.today__grp--appr { border-top-color: var(--s-appr); }
.today__grp--stuck { border-top-color: var(--u-hot); }
.today__grp--stuck .today__h { color: var(--u-hot); }
.today__h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 2px 4px 8px; }
.today__n { margin-left: auto; background: var(--parch-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.today__row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 7px 8px; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.today__row:hover { background: var(--parch-2); }
.today__row:active { transform: translateY(1px); }
.today__t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.today__meta { font-size: 12px; color: var(--muted); }

/* ═══════════════ Sidebar navigation — rail + main + topstrip (pinned rail) ═══════════════ */
:root { --rail-w: 244px; }
#app.app { display: block; }
#app[hidden] { display: none; }

/* Rail stays a fixed coal-ultramarine regardless of the light/dark theme toggle — locally
   pinning --ink/--parch here means every descendant rule that reads them (hover/is-on states
   etc.) stays correct without hunting each one down. GOBIMANS-94. */
.rail { --ink: #14122a; --parch: #efefef;
        position: fixed; top: 0; left: 0; width: var(--rail-w); height: 100dvh; z-index: 30;
        background: var(--ink); color: var(--parch); display: flex; flex-direction: column;
        border-right: 1px solid rgba(255,255,255,.08);
        transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.rail__brand { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; }
.rail .brand { display: inline-flex; align-items: baseline; }
.rail__mini { display: none; font-size: 19px; }
.rail__sub { align-self: center; white-space: nowrap; font-size: 10px; letter-spacing: .07em; color: var(--bronze-2); }
@media (max-width: 1620px) { .rail__sub { display: inline; } }
.rail__collapse { margin-left: auto; width: 26px; height: 26px; flex: none; display: grid; place-items: center;
        border-radius: 7px; border: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
        font-size: 16px; line-height: 1; cursor: pointer; }
.rail__collapse:hover { background: rgba(255,255,255,.14); color: #fff; }

.railnav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; overflow-y: auto;
        padding: 4px 12px 10px; margin: 0; min-height: 0; }
.railnav::-webkit-scrollbar { width: 6px; }
.railnav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
/* rgba(255,255,255,.34) on the rail was ~3:1 — fails AA at this size. .55 clears 4.5:1. GOBIMANS-195. */
.navgroup__lab { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
        letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 13px 12px 6px; }

.railnav .gbtn { display: flex; align-items: center; gap: 11px; width: 100%; justify-content: flex-start;
        padding: 8px 12px; border-radius: var(--r-sm); background: none; border: 0; color: rgba(255,255,255,.74);
        font-size: 13.5px; font-weight: 500; text-align: left; letter-spacing: 0; cursor: pointer;
        transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.railnav .gbtn:hover { background: rgba(255,255,255,.07); color: #fff; }
.railnav .gbtn.is-on { background: rgba(255,255,255,.10); color: #fff; }
.railnav .gbtn.gbtn--accent { background: none; color: rgba(255,255,255,.74); }
.railnav .gbtn.gbtn--accent:hover { background: rgba(255,255,255,.07); color: #fff; }
.railnav .gbtn.gbtn--accent.is-on { background: rgba(255,255,255,.10); color: #fff; }
.railnav .gbtn__ic { width: 18px; text-align: center; font-size: 15px; opacity: .8; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.railnav .gbtn.is-on .gbtn__ic { color: var(--bronze); opacity: 1; }
.railnav .gbtn__lab { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* GOBIMANS-327: проектная кнопка в рельсе — две строки вместо одной.
   Рельс 244px, но имя жалось до «Nebess…», потому что полоса прогресса (46px) и процент (30px)
   стояли с ним в одном ряду и забирали больше трети ширины. Теперь имя занимает всю строку,
   а прогресс уходит под него: сетка из двух колонок, вторая строка начинается там же, где имя. */
.railnav .gbtn--proj {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px;
  align-items: center; text-align: left; white-space: normal;
}
.railnav .gbtn--proj .gbtn__ic--proj { grid-row: 1 / span 2; }
.railnav .gbtn--proj .gbtn__lab { grid-column: 2; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* GOBIMANS-348: вторая строка — только компактный процент, без мини-полосы. */
.railnav .gbtn--proj .projmeta { grid-column: 2; display: flex; align-items: center; }

/* GOBIMANS-198: active projects surfaced in the rail (group "Проекты", above "Работа").
   Reuses the mini-progress markup from itemHtml()/pct() — recoloured here because that markup
   was tuned for the light `.picker__menu` popover, while the rail pins --ink/--parch dark
   regardless of the app theme (same reasoning as the .gbtn--accent overrides above). The glyph
   is the project name's first letter — there's no icon set for arbitrary project names. */
.gbtn__ic--proj { width: 20px; height: 20px; flex: none; border-radius: 50%;
        background: rgba(255,255,255,.14); font-size: 10.5px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center; opacity: 1; }
.gbtn--proj.is-on .gbtn__ic--proj { background: var(--bronze); color: var(--ink); }
.railnav .gbtn--proj .picker__ipct { color: rgba(255,255,255,.6); }
.railnav .gbtn--proj.is-on .picker__ipct { color: rgba(255,255,255,.85); }

.main { margin-left: var(--rail-w); min-width: 0; transition: margin-left var(--t-base) var(--ease); }
.topstrip { --ink: #14122a; --parch: #efefef;   /* fixed regardless of theme, same reasoning as .rail */
        position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 11px;
        height: var(--topbar-h); padding: 0 16px; background: var(--ink); color: var(--parch);
        border-bottom: 2px solid var(--bronze); }
.topstrip__sp { flex: 1 1 auto; }
.drawerbtn { display: none; width: 34px; height: 34px; place-items: center; border-radius: 8px;
        border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--parch);
        font-size: 18px; line-height: 1; cursor: pointer; flex: none; }

/* GOBIMANS-154: screen-level Back control in the top strip (shown only when there's a prior in-app screen) */
.backbtn { display: inline-flex; align-items: center; gap: 4px; font: inherit; cursor: pointer;
        border: 1px solid transparent; border-radius: 8px; background: none; }
.backbtn[hidden] { display: none; }
.topstrip__back { flex: none; height: 34px; padding: 0 11px 0 8px; color: var(--parch);
        border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08);
        font-size: 13px; font-weight: 600; line-height: 1;
        transition: background var(--t-fast) var(--ease); }
.topstrip__back:hover { background: rgba(255,255,255,.18); }
.topstrip__back .backbtn__ic { font-size: 18px; line-height: 1; margin-top: -1px; }

/* collapsed (desktop icon-режим) */
#app.is-collapsed { --rail-w: 66px; }
#app.is-collapsed .brand__mark, #app.is-collapsed .rail__sub,
#app.is-collapsed .gbtn__lab,
#app.is-collapsed .navgroup__lab { display: none; }
#app.is-collapsed .rail__mini { display: inline; }
#app.is-collapsed .rail__brand { justify-content: center; padding: 12px 0; gap: 0; }
#app.is-collapsed .rail { overflow: visible; }
#app.is-collapsed .rail__collapse { margin-left: 0; position: absolute; top: 15px; right: -13px;
        background: var(--ink); border: 1px solid rgba(255,255,255,.16); }
#app.is-collapsed .rail__collapse span { display: inline-block; transform: rotate(180deg); }
#app.is-collapsed .railnav .gbtn { justify-content: center; padding: 9px 0; }
#app.is-collapsed .railnav .gbtn__ic { width: auto; }
/* icon-only rail: no room for name + %, keep only the round letter glyph (GOBIMANS-198) */
#app.is-collapsed .gbtn--proj .picker__ipct,
#app.is-collapsed .gbtn--proj .projmeta { display: none; }   /* GOBIMANS-327 */

/* overlay for mobile drawer */
.navoverlay { position: fixed; inset: 0; background: rgba(20,20,20,.44); opacity: 0; pointer-events: none;
        transition: opacity var(--t-base) var(--ease); z-index: 25; }

/* mobile drawer */
@media (max-width: 860px) {
  .rail { transform: translateX(-100%); width: 272px; box-shadow: var(--e-4); }
  #app.is-collapsed { --rail-w: 244px; }
  #app.is-collapsed .brand__mark, #app.is-collapsed .rail__sub,
  /* GOBIMANS-327: на мобильном ящик разворачивается на 244px и показывает подписи целиком —
     значит и прогресс проекта должен вернуться вместе с ними, как и остальные .is-collapsed
     скрытия отменяются здесь же. */
  #app.is-collapsed .gbtn__lab, #app.is-collapsed .navgroup__lab,
  #app.is-collapsed .gbtn--proj .projmeta { display: revert; }
  #app.is-collapsed .gbtn--proj .projmeta { display: flex; }
  #app.is-collapsed .rail__mini { display: none; }
  #app.is-collapsed .rail__collapse { position: static; margin-left: auto; }
  #app.is-collapsed .railnav .gbtn { justify-content: flex-start; padding: 8px 12px; }
  .main { margin-left: 0; }
  #app.drawer-open .rail { transform: translateX(0); }
  #app.drawer-open .navoverlay { opacity: 1; pointer-events: auto; }
  .drawerbtn { display: grid; }
}
/* ===== Финкалькулятор (owner-only, эпик GOBIMANS-79) ===== */
.calc-tabs { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); display: flex; gap: 8px; flex-wrap: wrap; }
.calc-grid { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.calc-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.calc-f span { text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.calc-f input, .calc-f select { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.calc-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); align-self: end; padding: 8px 0; }
.calc-break, .calc-where { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--e-1); }
.calc-break__h, .calc-subh { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.calc-break__i { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.calc-where__c { display: inline-flex; flex-direction: column; gap: 1px; min-width: 130px; }
.calc-where__c i { font-style: normal; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.calc-where__c b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.012em; }
.calc-note { max-width: var(--content-max); margin: 10px auto 0; width: calc(100% - 32px); font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.calc-badge { display: inline-block; margin: 10px 16px 0; padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; background: color-mix(in oklch, var(--u-warn) 18%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in oklch, var(--u-warn) 45%, var(--line)); }
.calc-warn { max-width: var(--content-max); margin: 8px auto 0; width: calc(100% - 32px); font-size: 13px; line-height: 1.5; color: var(--u-hot); background: color-mix(in oklch, var(--u-hot) 8%, var(--surface)); border: 1px solid color-mix(in oklch, var(--u-hot) 30%, var(--line)); border-radius: var(--radius-sm); padding: 9px 13px; }
.calc-recommend { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--bronze-ink); }
.calc-sub { font-style: normal; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.calc-scenbar { max-width: var(--content-max); margin: 14px auto 0; width: calc(100% - 32px); }
.calc-actions { max-width: var(--content-max); margin: 12px auto 0; width: calc(100% - 32px); display: flex; gap: 8px; flex-wrap: wrap; }
.calc-subh { max-width: var(--content-max); margin: 18px auto 6px; width: calc(100% - 32px); }
.calc-ratesgrid, #cf_lines { max-width: var(--content-max); margin: 8px auto 0; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 6px; }
.calc-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 7px 9px; }
.calc-line input, .calc-line select { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-width: 0; }
.calc-line input[data-k="label"], .calc-line input[data-k="person"] { flex: 1 1 120px; }
.calc-line__num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-line__cur { width: 72px; }
.calc-line__ins { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.calc-rline__k { flex: 1 1 160px; font-size: 13.5px; color: var(--ink-2); }
.calc-rline__u { font-size: 11.5px; color: var(--muted); width: 34px; }
.calc-fxhist { margin: 0 0 6px; } /* collapsed per-pair FX history (GOBIMANS-214) */
.calc-fxhist summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 0 6px; }

/* ---------- Monthly contract quota panel (GOBIMANS-188) ---------- */
.quota__month { margin-left: 8px; font: inherit; }
.quota__rows { padding: 10px 16px 4px; display: flex; flex-direction: column; gap: 7px; }
.quota__row { display: flex; align-items: center; gap: 10px; }
.quota__type { flex: 0 0 150px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quota__bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--parch-2); overflow: hidden; }
.quota__fill { display: block; height: 100%; border-radius: 999px; background: var(--terra); }
.quota__fill--done { background: var(--s-done); }
.quota__n { flex: 0 0 64px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.quota__n--done { color: var(--s-done); }
.quota__extra { padding: 6px 16px 0; font-size: 12px; color: var(--muted); }
.quota__hint { padding: 4px 16px 10px; font-size: 12px; color: var(--muted); margin: 0; }
.quota__empty { padding: 12px 16px; }
.quota-edit__row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.quota-edit__row .quota-edit__type { flex: 1 1 auto; }
.quota-edit__row .quota-edit__qty { width: 96px; }
.quota-edit__tools { display: flex; gap: 8px; margin: 4px 0 10px; }
@media (max-width: 560px) { .quota__type { flex-basis: 96px; } }
@media (max-width: 560px) { .calc-line { gap: 5px; } .calc-line__num { width: 80px; } .calc-line input[data-k="label"], .calc-line input[data-k="person"] { flex: 1 1 100%; } }

/* ---------- Done celebration (GOBIMANS-94) — reduced-motion respects the media query below ---------- */
.confetti { position: fixed; top: 40%; left: 50%; width: 0; height: 0; z-index: 200; pointer-events: none; }
.confetti i { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 2px;
  opacity: 0; animation: confetti-burst 850ms var(--ease) forwards; }
@keyframes confetti-burst {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), 90px) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ---------------- Executor chains (GOBIMANS-267) ---------------- */
.chainzone { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.chainzone__h { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.chsteps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chstep { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 13px; }
.chstep__ic { width: 1.1em; text-align: center; }
.chstep__seq { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.chstep__lab { flex: 0 1 auto; }
.chstep__who { color: var(--muted); margin-left: auto; }
.chstep__done { margin-left: 8px; }
.chstep--active { background: color-mix(in srgb, var(--bronze) 12%, transparent); }
.chstep--active .chstep__who { color: var(--ink); font-weight: 600; }
.chstep--done { opacity: .62; }
.chstep--done .chstep__lab { text-decoration: line-through; }
.chainzone__acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chreject { display: inline-block; }
/* GOBIMANS-293: "notify client now" row on an approval task */
.notifyclient { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.notifyclient__hint { font-size: 12px; color: var(--muted); }
/* GOBIMANS-357: when the action is not available yet, the hint stops being a footnote and becomes
   the answer to "why is this greyed out" — so it carries the same weight as the button label. */
.notifyclient__hint--why { color: var(--ink); }
.chreject__body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.chreject__body input { flex: 1 1 160px; }
.chbuilder { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.chbuilder__tmpl { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.chbuilder__rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.chrow { display: flex; gap: 6px; align-items: center; }
.chrow__lab { flex: 1 1 auto; }
.chrow__as { flex: 0 0 40%; max-width: 220px; }
/* GOBIMANS-381: a completed step is history — shown for context, greyed out, no delete control. */
.chrow--locked { opacity: .62; }
.chrow--locked .chrow__lab, .chrow--locked .chrow__as { background: var(--parch-2); cursor: not-allowed; }
.chrow__lockic { flex: 0 0 auto; width: 22px; text-align: center; color: var(--muted); }
.chbuilder__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.chbuilder__saveas { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.outfilters { display: flex; gap: 14px; margin: 4px 0 14px; }
.field--inline { flex-direction: row; align-items: center; gap: 8px; }

/* ==== GOBIMANS-401: канбан — волна 3 аудита 27.07.2026 ==================================
   Блок стоит здесь, а не рядом с базовыми правилами, ПО ТОЙ ЖЕ ПРИЧИНЕ, что и мобильный блок
   в конце файла (см. комментарий к GOBIMANS-319): часть правил, которые надо перебить, объявлена
   ниже своих «родителей», а при равном весе побеждает то, что стоит позже. Переписывать их на
   месте пришлось бы в четырёх разных секциях; здесь всё, что меняет волна 3, лежит рядом и
   читается как один набор решений.

   Развилка «две модели прогресса» закрыта Андреем 27.07.2026 — вариант (б): статус и цепочка
   исполнителей остаются независимыми, а интерфейс их подписывает и называет расхождение словами.
   Ниже — визуальная часть этого решения плюс косметика 3.1–3.7. */

/* ---- 3.4 / 4.7: заголовок проекта и вкладки — одна полоса вместо двух ---- */
/* #viewNav опустел: вкладки переехали в .eh__top (renderEventHead). Узел остался в разметке —
   на нём висит логика показа/скрытия при смене режима, — но полосой быть перестал. */
#viewNav { display: none; }
.eventhead { position: sticky; top: var(--topbar-h); z-index: 16;
  background: var(--parch); border-bottom: 1px solid var(--line-soft);
  padding: 6px 16px 0; }
/* nowrap — иначе смысл правки теряется: как только действия проекта переносятся, полос снова
   становится две, только вторая теперь наполовину пустая. На узком экране первым уходит не ряд,
   а содержимое: сначала прячется дата/место, потом сжимается имя проекта. */
.eh__top { align-items: center; gap: 10px 14px; flex-wrap: nowrap; }
.eh__name { font-size: var(--fs-h3); font-weight: 800; line-height: 1.25;
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Дата и место — справка, а не навигация: место в ряду они уступают первыми. flex-shrink:100
   против 1 у имени — это и есть порядок уступки: пока строка не помещается, ужимается дата, а
   имя проекта режется только когда ужимать больше нечего. */
.eh__meta { font-size: 12.5px; flex: 0 100 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* А ужиматься до огрызка («1 и…») дате незачем: обрезанная дата не сообщает ничего и при этом
   занимает место, за которое режется имя проекта. Ниже ширины, где строка сходится целиком, она
   просто уходит — дата и место проекта живут в его настройках, а не в рабочей шапке. */
@media (max-width: 1600px) { .eh__meta { display: none; } }
.viewnav--inline { position: static; padding: 0; margin: 0; width: auto; max-width: none;
  background: none; border-bottom: 0; align-items: center; flex: 0 0 auto; }
.viewnav--inline .vtab { padding: 7px 10px 6px; margin-bottom: 0; border-bottom-width: 2px; }
.eh__actions { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; }
/* Тулбар липнет под этой полосой; высота полосы теперь одна, а не две. */
.toolbar { top: calc(var(--topbar-h) + 44px); }
@media (max-width: 720px) {
  .eventhead { padding: 6px 12px 0; }
  /* На телефоне одна строка не собирается ни при каком раскладе: имя проекта + три вкладки +
     переключатель шире 390 px. Здесь ряд снова переносится — имя на первой строке целиком,
     вкладки на второй, — то есть ровно те же две полосы, что были до правки, минус полоса
     статусов. Экономия вертикали на десктопе от этого не страдает: nowrap выше остаётся. */
  .eh__top { gap: 6px 10px; flex-wrap: wrap; }
  .eh__name { white-space: normal; overflow: visible; flex: 1 1 100%; }
  /* Вкладки занимают вторую строку целиком и переносятся внутри неё — то же поведение, что
     GOBIMANS-319 завёл ради необрезанного переключателя «Доска/Список». */
  .eh__top .viewnav--inline { flex: 1 1 100%; flex-wrap: wrap; }
  /* Колонки теперь по содержимому — растягивать доску на весь экран больше нечем и незачем. */
  .kanban { min-height: 0; }
}

/* ---- 3.4 / 4.8: вертикаль. Колонки перестают тянуться на весь вьюпорт ---- */
/* Было: .kanban фиксированной высоты + align-items:stretch, поэтому под последней карточкой висело
   500–600 px пустоты в каждой колонке — на проекте с четырьмя задачами это ~70 % площади доски.
   Стало: колонка ровно по своему содержимому, но не выше экрана — тогда её .kcol__body снова
   становится скролл-контейнером и залипший заголовок из GOBIMANS-272 работает как работал. */
.kanban { height: auto; align-items: flex-start; padding-bottom: 24px; }
.kcol { max-height: calc(100dvh - var(--topbar-h) - var(--kanban-chrome)); }
/* Пустая колонка — всё ещё мишень для перетаскивания, а не полоска в 4 px. */
.kcol__body { min-height: 76px; }

/* ---- 3.2 / 4.4: пустые колонки не схлопываются ---- */
/* GOBIMANS-351 ужимал пустую колонку до 132 px, чтобы отдать ширину полным. Цена оказалась выше
   выигрыша: «Готово» — колонка, куда карточку тащат чаще всего, — становилась самой мелкой мишенью
   на доске, и доска из шести стадий читалась как доска из трёх. Пустая колонка снова полноразмерная
   мишень; ширину она отдаёт мягко (flex-shrink), а не схлопыванием. Ручное сворачивание в 44-px
   полоску (GOBIMANS-113) осталось — это осознанное действие человека, а не догадка вёрстки. */
.kcol--slim { flex: 1 1 200px; max-width: 300px; }
.kcol--slim .kcol__collapse { display: inline-flex; }
.kcol--slim .kcol__add { text-align: left; font-size: 12.5px; }

/* ---- 3.1 / 4.3: бейдж «СРОЧНО» больше не режет заголовок ---- */
/* При колонке 168 px бейдж съедал ~62 px и ломал заголовок на 4 строки. Своя строка над
   заголовком стоит ~16 px и только у срочных карточек, которых на доске единицы. */
.kc__flags { display: flex; align-items: center; gap: 6px; }
.kc__top { align-items: flex-start; }
.kc__title { padding-top: 1px; }

/* ---- 3.3 / 4.5: точка приоритета подписана буквой ---- */
/* Легенду убрали в GOBIMANS-330, значение осталось в тултипе — то есть на телефоне нигде. Буква
   внутри точки — это ровно то имя, которым приоритет назван в фильтре («A — горит»), поэтому
   отдельная легенда больше не нужна ни на одном экране. Заливка — тон приоритета, разбавленный
   поверхностью, так что текст читается и в светлой, и в тёмной теме. */
.udot { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 9.5px; font-weight: 800; line-height: 1; letter-spacing: 0; color: var(--ink);
  font-variant-numeric: normal; box-shadow: none; border: 1px solid var(--line); }
.udot[data-u="very urgent"] { background: color-mix(in oklch, var(--u-hot) 30%, var(--surface));
  border-color: var(--u-hot); box-shadow: none; }
.udot[data-u="please take care"] { background: color-mix(in oklch, var(--u-warn) 34%, var(--surface));
  border-color: var(--u-warn); }
.udot[data-u="understood"] { background: color-mix(in oklch, var(--u-ok) 28%, var(--surface));
  border-color: var(--u-ok); box-shadow: none; }

/* ---- 3.6 / 4.1 / 6.21: полоса цепочки говорит словами ---- */
/* Смысл («шаг X из Y, делает Z») жил только в title/aria — под мышью на десктопе и нигде на
   телефоне, при том что справка обещала обратное. Плюс непройденные сегменты шли --line на
   --surface (≈1,15:1): «цепочка на 1 из 5» и «цепочка готова» выглядели одинаково. */
.chain { display: flex; flex-direction: column; gap: 3px; margin: 7px 0 1px; }
.chain .chbar { margin: 0; }
.chain__line { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35;
  overflow-wrap: anywhere; }
/* Расхождение статуса и цепочки — решение (б). Не молчаливая подсветка, а фраза: «в Ревью, но
   активен шаг Монтаж». Плашка тёплая (--tint-warn-*), потому что это не ошибка, а рассинхрон,
   который человек должен увидеть и разрешить сам. */
.chain__mis { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; font-weight: 600;
  line-height: 1.35; color: var(--tint-warn-ink); background: var(--tint-warn-bg);
  border: 1px solid var(--tint-warn-line); border-radius: var(--r-xs); padding: 3px 6px;
  overflow-wrap: anywhere; }
.chain__mis--zone { font-size: 12.5px; margin: 0 0 10px; padding: 7px 10px; }
.chainzone__n { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.chbar__seg--pending { background: var(--chain-pending); opacity: 1; }

/* ---- 3.5 / 4.9: ряд действий карточки не переносится ---- */
/* «⋯» падал на отдельную строку: +34 px пустой высоты и две кнопки одной группы визуально
   разорваны. Группа теперь неделима и держит правый край; аватар отдаёт ей margin-left:auto. */
.kc__acts { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-left: auto; }
.kc__who { margin-left: 0; }

/* ---- 3.7 / 6.24: тёмная тема доски ---- */
/* Сами плоскости разведены токенами (tokens.css) — здесь только то, что токенам не подчинялось:
   карточка на доске получает видимый край, иначе на тёмном фоне она держится на одной тени,
   а тень на тёмном не видна вовсе. */
:root[data-theme="dark"] .kcard { border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"] .kcard:hover { border-color: var(--bronze-2); }
:root[data-theme="dark"] .kcol { border-color: var(--line-soft); }
:root[data-theme="dark"] .kcol__h { border-bottom-color: var(--line); }

/* GOBIMANS-265: client portal "How it works" help panel (collapsed by default, opened from the header) */
.phelp { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--parch); padding: 14px 18px; margin: 14px 0 20px; }
.phelp[hidden] { display: none; }
.phelp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.phelp__sec { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.phelp__sec:first-of-type { border-top: 0; }
.phelp__sh { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.phelp__p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }


/* ==== GOBIMANS-319: мобильная доска ====================================================
   Находка (аудит S2-5): на 390px до первой карточки было ~600px служебного, а переключатель
   «Доска/Список» обрезался правым краем — то есть «Список», который на телефоне и нужен, с
   экрана не виден.

   Блок стоит В КОНЦЕ файла ОСОЗНАННО. В этой таблице базовые правила местами объявлены ПОСЛЕ
   медиазапросов (.eh__actions — строка ~1517), а медиазапрос специфичности не добавляет: при
   равном весе побеждает то, что ниже. Тот же блок в середине файла молча не работал.

   Узлы не переносятся: показ/скрытие — только классами, поэтому десктопная разметка не меняется
   и ломать там нечего. */
@media (max-width: 720px) {
  /* Обе легенды дублируют то, что и так на экране: статусы — заголовки колонок (доска) или чипы
     (список), приоритеты — цветные точки на самих карточках. На телефоне это четыре ряда до
     первой задачи ради подписи к тому, что видно рядом. */
  /* GOBIMANS-330: .eh__legend больше нет вовсе — здесь остаётся только легенда приоритетов. */

  /* Вкладки переносятся — «Ещё» и «Доска/Список» уходят на вторую строку целиком, а не
     обрезаются. Это и есть починка обрезанного переключателя. */
  .viewnav { flex-wrap: wrap; }
  .vtab--more { display: inline-flex; }

  /* Под «Ещё» уезжают действия проекта и фильтры. Поиск НАМЕРЕННО остаётся снаружи: это первый
     инструмент, которым ищут задачу с телефона, — прятать его под кнопку значило бы чинить одну
     находку, заводя другую. */
  .eh__actions,
  #statusChips,
  .toolbar__row--meta > *:not(.search) { display: none; }
  body.mob-more .eh__actions,
  body.mob-more #statusChips { display: flex; }
  body.mob-more .toolbar__row--meta > *:not(.search) { display: inline-flex; }
}

/* ---------- Ряд кнопок/чипов: один паттерн (GOBIMANS-434) ----------
   ДЕРЖАТЬ В КОНЦЕ ФАЙЛА. Базовые правила этих рядов объявляют `flex-wrap: wrap` и разбросаны по
   всему файлу (.idea-filters ~840, .calc-tabs ~1950, .viewnav в медиа-блоке ~2230). Специфичность
   у всех одинаковая — один класс, — поэтому побеждает тот, кто ниже. Первая версия этой правки
   стояла выше и молча проигрывала двум из четырёх: вкладки хаба и калькулятора продолжали
   переноситься, и заметить это можно было только по кадру. */
/* На десктопе ширины хватает — ряд переносится. На мобиле он скроллится вбок, и ЭТО ВИДНО:
   правый край растворяется маской. До фазы C .cfilter скроллился со `scrollbar-width: none` и без
   всякого признака прокрутки, поэтому ряд читался как обрезанная вёрстка — в журнале на 390px
   четвёртый чип разрезан пополам («Все 26 · Задачи 15 · Контакты 1 · К…»).
   Маска — альфа-канал, а не краска: у неё нет цвета, который мог бы разойтись с темой, поэтому она
   работает в обеих сразу и не нуждается в токене. */
@media (max-width: 720px) {
  /* НЕ `.viewnav` целиком. Ряд внутри проекта несёт не только вкладки: там ещё «Ещё» и
     переключатель «Доска/Список», и его перенос на вторую строку — сознательная правка фазы B
     (выше в этом файле). Режим просмотра, уехавший за правый край, хуже второй строки, а вкладки
     денежного хаба — равноправные соседи, которым прокрутка ничего не стоит. */
  .chiprow, .cfilter, .viewnav--money, .calc-tabs, .idea-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .chiprow::-webkit-scrollbar, .cfilter::-webkit-scrollbar, .viewnav--money::-webkit-scrollbar,
  .calc-tabs::-webkit-scrollbar, .idea-filters::-webkit-scrollbar { display: none; }
  .chiprow > *, .cfilter > *, .viewnav--money > *, .calc-tabs > *, .idea-filters > * { flex: none; white-space: nowrap; }

/* ---------- GOBIMANS-432: матрица доступа — единственная таблица, которую нельзя разложить ----------
   «Раздел × роль» — настоящая двумерная сетка: в стопке из неё исчезает именно то, ради чего она
   существует (сравнение роли с ролью в одной строке). Поэтому она не стопка, а прокрутка с
   закреплённой первой колонкой: раздел виден всегда, и сама липкая колонка показывает, что
   таблицу можно двигать. Держать в конце файла по той же причине, что и ряд чипов: базовые
   правила .ctable объявлены выше и без этого перекрыли бы липкость фоном ячейки. */
@media (max-width: 720px) {
  .ctable-wrap .ctable th:first-child,
  .ctable-wrap .ctable td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface); border-right: 1px solid var(--line-soft);
  }
  .ctable-wrap .ctable thead th:first-child { background: var(--parch-2); z-index: 2; }
  .ctable-wrap .ctable tbody tr:hover td:first-child { background: var(--parch); }
}

/* C1 — the portal access-code row inside the client-link dialog. `--s-appr` when a code is set,
   terracotta when it is not: «no code» is not an error, it is a state somebody should decide about
   before sending the link. */
.ppin-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.ppin-row__state { font-size: 13px; color: var(--muted); flex: 1 1 14rem; }
.ppin-row__state[data-open="1"] { color: color-mix(in oklch, var(--terra) 78%, var(--ink)); }
#portalPinVal { font-variant-numeric: tabular-nums; letter-spacing: .22em; text-align: center; font-size: 20px; }