/* 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__pct, .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); }
/* 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); }
.btn--primary:hover { background: #353535; border-color: #353535; }
.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); }
.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: 170px; }
.picker__pct { font-size: 12px; font-weight: 600; color: var(--bronze-2); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.pring { flex: none; }
.pring__n { line-height: 1; }
.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); }
.picker__check { width: 16px; flex: 0 0 auto; color: var(--bronze); 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__mini { width: 46px; height: 6px; border-radius: 999px; background: var(--parch-3); overflow: hidden; flex: 0 0 auto; }
.picker__mini > i { display: block; height: 100%; background: var(--s-done); }
.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); }
.picker__star.is-pinned { color: var(--bronze); }
.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: 16px 16px 8px;
  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-154: compact "you are here" crumb — project · current view */
.eh__crumb { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 4px;
        font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.eh__crumb-proj { color: var(--bronze-ink); min-width: 0; max-width: 46vw;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh__crumb-sep { opacity: .6; }
.eh__crumb-view { white-space: nowrap; flex: none; }
.eh__meta { color: var(--muted); font-size: 14px; }
.eh__bar { margin-top: 12px; height: 10px; border-radius: 999px; background: var(--parch-3); overflow: hidden; display: flex; }
.eh__bar > span { display: block; height: 100%; }
.eh__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.eh__legend b { font-weight: 700; }
.eh__legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky; top: var(--topbar-h); z-index: 15;
  background: var(--parch);
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 16px;
  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. */
.boardlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.boardlegend__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.boardlegend__sep { color: var(--line); }
.boardlegend__chip { padding: 0 5px; font-size: 11px; line-height: 15px; }
.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="brief"].is-on { background: var(--s-brief); }
.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); min-width: 34px; }
.section__titles { flex: 1 1 auto; min-width: 0; }
.section__en { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.section__ru { font-size: 12px; color: var(--muted); }
.section__prog { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.section__minibar { width: 56px; height: 7px; border-radius: 999px; background: var(--parch-3); overflow: hidden; }
.section__minibar > i { display: block; height: 100%; background: var(--s-done); transition: width var(--t-base) var(--ease); }
.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); }
.item__main { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; 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="brief"] .item__dot { background: var(--s-brief); }
.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 { 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 .stg: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); }
.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); }
.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="brief"]      { background-color: color-mix(in oklch, var(--s-brief) 14%, var(--surface)); color: color-mix(in oklch, var(--s-brief) 72%, var(--ink)); border-color: color-mix(in oklch, var(--s-brief) 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; }
.field span { letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.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; }

.toaststack {
  position: fixed; 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;
}
.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 { grid-template-columns: auto 1fr; }
  .item__ctrls { grid-column: 1 / -1; 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: 11px 12px 10px; margin-bottom: -1px;
  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); }
.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) + 42px); }

/* 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; }
.vempty { max-width: var(--content-max); margin: 0 auto; padding: 30px 16px; color: var(--muted); text-align: center; }
.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: #F6E4E1; color: var(--u-hot); border-color: #E6C3BD; }
.due--soon { background: #F6ECD8; color: #95661F; border-color: #E7D2A8; }
.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: #F6E4E1; color: var(--u-hot); border-color: #E6C3BD; }
.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(--u-hot); background: #F6E4E1; border-bottom-color: #E6C3BD; }
.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: #F6E4E1; color: var(--u-hot); }

/* ---------- 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 #E6C3BD; background: #F6E4E1; color: var(--u-hot); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---------- Production plan: stages + timeline rows + team load ---------- */
.stages { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--parch); padding: 10px 12px; }
.stages__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stages__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stg { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.stg:hover { border-color: var(--bronze); }
.stg.is-on { color: var(--bronze-ink); background: color-mix(in oklch, var(--bronze) 12%, var(--surface)); border-color: color-mix(in oklch, var(--bronze) 38%, var(--line)); }
.stgmini { font-size: 11.5px; color: var(--muted); letter-spacing: .5px; white-space: nowrap; }
.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); 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: #F6E4E1; color: var(--u-hot); }
/* 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(--u-hot); background: #F6E4E1; border-color: color-mix(in oklch, var(--u-hot) 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(--u-hot); background: #F6E4E1; border-color: #E6C3BD; }
/* ---------- 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) ---------- */
.finsum { max-width: var(--content-max); margin: 8px auto 0; width: calc(100% - 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.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) ---------- */
.taskdetail { display: grid; 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; }
.tzone > summary { cursor: pointer; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  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; }
.ro__lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; 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; }

.finsum__c { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--e-1); }
.finsum__c span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.finsum__c b { font-family: var(--font-display); font-size: 22px; }
.finsum__c--in b { color: var(--s-done); }
.finsum__c--out b { color: var(--u-hot); }
.finsum__c--m { border-color: var(--bronze); }
.finsum__c--m b { color: var(--bronze-ink); }
.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; }
.inbox-reject textarea { flex: 1; 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%; }
.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: #95661F; background: #F6ECD8; border: 1px solid #E7D2A8; }
.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; }
.pdcard__act { display: flex; gap: 8px; margin-top: 8px; }
.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; }
/* Compacted (GOBIMANS-216, «занимает много места»): tighter cells + narrower min column —
   more cards per row, phone/email share one line below — no data dropped. */
.cgrid { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 8px 16px 96px; display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 9px; }
.ccard { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; 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); }
.ccard:hover { border-color: var(--bronze-2); box-shadow: var(--e-2); transform: translateY(-1px); }
.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; margin-top: 1px; }
.ccard__role { font-size: 12.5px; color: var(--muted); }
/* Process role / successor status (GOBIMANS-193) */
.ccard__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.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; margin-top: 4px; }
.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: 4px; border-top: 1px solid var(--line-soft); padding-top: 4px; }

/* ---------- 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) + 42px); }
  .cgrid, .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(--u-hot); background: #F6E4E1; }

@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; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e-3); padding: 6px; }
.bellmenu__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 6px; }
.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; }
.userrole { font-size: 10.5px; color: var(--bronze-2); text-transform: lowercase; }
.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); }
/* 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; }
/* 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; }
.home__hero { display: flex; align-items: center; gap: 18px; padding: 22px 22px; border-radius: var(--radius);
  background: linear-gradient(120% 140% at 0% 0%, var(--parch-2), var(--surface) 65%); border: 1px solid var(--line-soft); box-shadow: var(--e-1); }
.home__mark { font-size: 30px; flex: 0 0 auto; color: var(--ink); }
.home__title { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 800; margin: 0 0 5px; }
.home__lead { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 70ch; }
.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; }
.htile { text-align: left; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 116px; 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: 17px; font-weight: 700; color: var(--ink); }
.htile__n { font-size: 28px; font-weight: 800; color: var(--bronze-ink); line-height: 1; margin-top: 2px; }
.htile__sub { font-size: 12px; color: var(--muted); margin-top: auto; line-height: 1.4; }
.htile--hero { background: linear-gradient(120% 140% at 100% 0%, var(--parch-2), var(--surface) 70%); }
.htile--hero .htile__k { color: var(--bronze-ink); }
.htile__big { font-size: 32px; 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__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: #E7F0E7; color: var(--s-done); }
.afeed__ic--update { background: #F6ECD8; color: #95661F; }
.afeed__ic--delete { background: #F6E4E1; color: var(--u-hot); }
.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; }
.jsel { margin-left: 2px; }

/* ---------- Access table ---------- */
.utable td { vertical-align: middle; }
.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: #F6ECD8; color: #95661F; border: 1px solid #E7D2A8; }
.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: #E7F0E7; color: var(--s-done); border: 1px solid #CADCC9; }
.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; }
  .userbtn { padding: 4px 6px; }
  .userbtn .picker__chev { display: none; }
  .usermeta, .userav { display: none; }
  .userbtn__burger { display: inline; }
  .userbox { margin-left: auto; }
  .langtoggle:not(.langtoggle--menu) { display: none; }   /* language switch moves into the menu */
  .usermenu__lang { display: flex; }
  .picker { flex-shrink: 0; }   /* identify the open project before letting search grow */
  .picker__btn { min-width: 0; }
  .picker__pct { display: none; }
  .picker__name { max-width: 33vw; }
  /* 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, .ehset, .topsearch__x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* 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; }
  /* home: stack hero, single-column panels, comfortable stat grid */
  .home__hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
  .home__mark { font-size: 26px; }
  .home__title { font-size: 25px; }
  .hstat { flex-wrap: wrap; }
  .hstat b { margin-left: auto; }
  .home__nav { grid-template-columns: 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; }
  .finsum { grid-template-columns: 1fr; }
  .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%; }
  .rrow__meta { width: 100%; justify-content: flex-start; padding-left: 24px; }
  .idea-row .rrow__meta { flex-wrap: wrap; row-gap: 6px; }   /* an idea row carries more actions than fit on one line */
  .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%; }
  /* access table → stacked person-cards on mobile (a 6-col table can't fit 390px without clipping) */
  .utable thead { display: none; }
  .utable, .utable tbody, .utable tr, .utable td { display: block; width: 100%; }
  .utable tr { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .utable tr:last-child { border-bottom: none; }
  .utable td { padding: 3px 0; border: none; }
  .utable td:empty { display: none; }
  .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: #F6ECD8; color: #6F4A28; border-bottom: 1px solid #E7D2A8; }
.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 #D9B877; background: #fff8ec; color: #6F4A28; font-weight: 700;
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px; }
.demobar__btn:hover { background: #fff; }

@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; }
}

/* ---------- 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;
  min-height: calc(100dvh - var(--topbar-h) - var(--kanban-chrome)); }   /* R2: board fills the viewport, no void below */
.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; }
.kcol__h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; }   /* R2: even header heights. GOBIMANS-199: dropped dead `position: sticky` — the
  scroll container is the sibling .kcol__body, not this element, so sticky never had any effect. */
.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; }
.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-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 { 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); }
.kcard.is-dragging { opacity: .6; transform: rotate(1.5deg) scale(1.02); cursor: grabbing; box-shadow: var(--e-drag); }
.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; }
.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__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: #F6E4E1; color: var(--u-hot); }
.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; }
.cmts__h { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; 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; }
  .kanban { padding: 10px 10px 96px; }
  .kcol { flex-basis: 82vw; max-height: none; }
  .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) ---------- */
.composer { display: grid; gap: 7px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.section__body > .composer { margin: 8px 16px 12px; }
.composer textarea { font-family: inherit; font-size: 14px; color: var(--ink); resize: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--parch); }
.composer textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bronze) 20%, transparent); }
.composer__row { display: flex; gap: 7px; }

/* ---------- 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 ---------- */
.eh__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ehset { border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1;
  padding: 4px 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ehset:hover { background: var(--parch-2); color: var(--ink); }
.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: client brief-form hint ---------- */
.bfhint { margin: 0; padding: 8px 12px; font-size: 12px; line-height: 1.5; color: var(--ink-2);
  background: color-mix(in oklch, var(--bronze) 7%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--bronze) 18%, var(--surface)); border-radius: var(--radius-sm); }

/* ---------- 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; }
.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: 38ch; }
.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); }

/* 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; }
.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-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__mini { background: rgba(255,255,255,.18); }
.railnav .gbtn--proj .picker__mini > i { background: var(--bronze-2); }
.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 + mini-bar + %, keep only the round letter glyph (GOBIMANS-198) */
#app.is-collapsed .gbtn--proj .picker__mini, #app.is-collapsed .gbtn--proj .picker__ipct { display: none; }

/* 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,
  #app.is-collapsed .gbtn__lab, #app.is-collapsed .navgroup__lab { display: revert; }
  #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; } }