@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Design direction: the department head's first reference — a light dashboard
   of soft white cards on a pale ground, a menu on the left, icons in tinted
   circles — in Grampus colours (owner, 19.10: «Дизайн нужно сделать ближе к
   референсу начальному … Взять за основу цвета грампуса брендовые и логотип»).
   The brand lives in the frame: the dark navy menu with the white logo and a
   crimson glow, the crimson of what is chosen and pressed, the motivation card.
   The data area stays light and quiet.

   Colour is still information. Green means figures arrived, amber attention,
   red blocked — and they are tints with coloured text, never fills that shout.
   Crimson is the brand, not «blocked»: blocked is its own, plainer red. */

:root {
  --font-ui: "Onest", "Segoe UI", system-ui, sans-serif;

  /* Grampus: navy, crimson and rust, measured from the brand backgrounds. */
  --brand-navy: #262e39;
  --brand-navy-2: #2f3846;
  --brand-crimson: #b53146;
  --brand-crimson-soft: #f8e6e9;
  --brand-rust: #9f423b;

  --ground: #f3f4f7;
  --surface: #ffffff;
  --ink: #1f2633;
  --ink-soft: #5d6677;
  --ink-faint: #9aa2b1;

  /* Semantic only. Never used to brighten something up. */
  --ok: #22a06b;
  --ok-soft: #e3f5ec;
  --warn: #e0a100;
  --warn-soft: #fdf3d7;
  --blocked: #d64545;
  --blocked-soft: #fbe5e5;
  --select: var(--brand-crimson);
  --select-soft: var(--brand-crimson-soft);

  --line: #e3e6ec;
  --rule: 1px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 6px 18px rgb(16 24 40 / 0.06);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 500 15px/1.5 var(--font-ui);
}

/* ---------------------------------------------------------------- layout -- */

.shell { display: flex; min-height: 100vh; }
.main { flex: 1; padding: clamp(1rem, 3vw, 2.5rem); min-width: 0; }

/* --------------------------------------------------------------- sidebar -- */

.sidebar {
  width: 15rem;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 0.2s ease;
}
.sidebar.collapsed { width: 4.25rem; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .brand-text { display: none; }

.brand {
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.9rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-content: center;
  background: var(--select);
  border: 1px solid var(--line);
  font-weight: 700;
}
.brand-text strong { display: block; font-weight: 700; letter-spacing: -0.02em; }
.brand-text span {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-soft);
}

.nav-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.6rem 0.7rem;
  background: transparent; border: 2px solid transparent;
  font: inherit; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; text-align: left;
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { background: var(--ground); color: var(--ink); border-color: var(--ink); }
.nav-item[aria-current="page"] {
  background: var(--select); border-color: var(--ink); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.nav-item:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
.nav-spacer { flex: 1; }

/* ---------------------------------------------------------------- header -- */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
h1 {
  margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.page-head p {
  margin: 0.5rem 0 0; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink-soft);
}

/* ----------------------------------------------------------------- panel -- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.25rem;
}
.panel > h2 {
  margin: 0 0 1rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 700;
}

/* ----------------------------------------------------------------- tiles -- */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem; margin-bottom: 1.75rem;
}
.tile {
  background: var(--surface); border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.15rem;
}
.tile .label {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-soft);
}
.tile .value {
  font-size: 2.5rem; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 0.35rem;
}
.tile.is-ok { border-bottom-width: 10px; border-bottom-color: var(--ok); }
.tile.is-warn { border-bottom-width: 10px; border-bottom-color: var(--warn); }
.tile.is-blocked { border-bottom-width: 10px; border-bottom-color: var(--blocked); }

/* ----------------------------------------------------------------- donut -- */

.split { display: grid; gap: 1.75rem; grid-template-columns: 1fr; margin-bottom: 1.75rem; }
@media (min-width: 64rem) { .split { grid-template-columns: 21rem 1fr; } }

.donut-wrap { position: relative; display: grid; place-items: center; }
.donut { width: 100%; max-width: 14rem; overflow: visible; transform: rotate(-90deg); }
.donut path {
  stroke: var(--ink); stroke-width: 0.04; stroke-linejoin: round; cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease; transform-origin: center;
}
.donut-wrap.dimmed path { opacity: 0.25; }
.donut-wrap.dimmed path.active { opacity: 1; transform: scale(1.05); }
.donut-centre {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none;
}
.donut-centre .big {
  font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.donut-centre .cap {
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-soft);
}

.legend { display: grid; gap: 0.35rem; margin-top: 1.1rem; }
.legend button {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.4rem 0.5rem; background: transparent; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; text-align: left;
}
.legend button:hover { border-color: var(--ink); background: var(--ground); }
.legend .swatch { width: 0.85rem; height: 0.85rem; border: 1px solid var(--line); flex: none; }
.legend .count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- employees -- */

.bars { display: grid; gap: 0.7rem; }
.bar-row { display: grid; grid-template-columns: 10rem 1fr 2.5rem; gap: 0.75rem; align-items: center; }
.bar-row .who {
  font-weight: 700; font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track {
  height: 1.5rem; border: 1px solid var(--line); background: var(--ground);
  display: flex; overflow: hidden;
}
.bar-track span { display: block; height: 100%; }
.bar-track .seg-ok { background: var(--ok); }
.bar-track .seg-blocked { background: var(--blocked); }
.bar-row .total {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.85rem; text-align: right;
}

/* ----------------------------------------------------------------- table -- */

.toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
select, button.action {
  font: inherit; font-weight: 700; padding: 0.5rem 0.8rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
select:focus-visible, button.action:focus-visible, .legend button:focus-visible {
  outline: var(--rule) solid var(--select); outline-offset: 2px;
}
button.action:active { transform: translateY(1px); }

.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 56rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
thead th {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.01em; background: var(--ground); color: var(--ink-soft); white-space: nowrap;
}
tbody tr:hover { background: var(--ground); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
td .deal { font-weight: 600; }

/* The pause registry is wide on purpose; on phones only its frame scrolls. */
.pause-table { min-width: 72rem; }
.pause-table td { vertical-align: top; }
.pause-toolbar label { margin: 0; }
.pause-toolbar input[type="search"] {
  min-width: 0; width: min(22rem, 100%); padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); background: var(--surface); font: inherit;
}
.pause-visible-count { margin: 0 0 0.75rem; color: var(--ink-soft); font-weight: 700; }
.pause-deal-id { display: block; margin-top: 0.25rem; color: var(--ink-soft); font-size: 0.72rem; }
.pause-explanation { max-width: 24rem; overflow-wrap: anywhere; }
.pause-explanation summary { margin-top: 0.3rem; cursor: pointer; font-weight: 700; }
.pause-explanation p { margin: 0.35rem 0 0; white-space: pre-wrap; }
@media (max-width: 48rem) {
  .pause-toolbar { align-items: stretch; }
  .pause-toolbar label, .pause-toolbar input[type="search"] { width: 100%; }
}

.pill {
  display: inline-block; padding: 0.15rem 0.5rem; border: 1px solid var(--line);
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.pill.blocked { background: var(--blocked); }
.pill.warn { background: var(--warn); }
.pill.empty { background: var(--ground); color: var(--ink-soft); }

.goal-trigger {
  padding: 0.25rem 0.55rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.goal-trigger:hover { background: var(--select); }
.goal-trigger:focus-visible { outline: var(--rule) solid var(--select); outline-offset: 2px; }

/* ---------------------------------------------------------- goal picker -- */

.goal-dialog {
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  padding: 0; border: 0; background: transparent; color: var(--ink);
}
.goal-dialog::backdrop { background: rgb(0 0 0 / 0.62); }
.goal-dialog-card {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.goal-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line);
}
.goal-dialog-head h2 { margin: 0; font-size: 1.5rem; }
.goal-dialog-head p { margin: 0.3rem 0 0; color: var(--ink-soft); font-weight: 700; }
.eyebrow {
  display: block; margin-bottom: 0.25rem; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.01em; color: var(--ink-soft);
}
.dialog-close {
  width: 2.4rem; height: 2.4rem; flex: none; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 700 1.5rem/1 system-ui;
  cursor: pointer;
}
.dialog-close:hover { background: var(--blocked); }
.goal-note {
  margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--line);
  background: var(--ground); font-weight: 700;
}
.goal-list { display: grid; gap: 0.55rem; max-height: 45vh; overflow-y: auto; padding: 0.15rem; }
.goal-option {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.7rem;
  align-items: start; margin: 0; padding: 0.7rem; border: 1px solid var(--line);
  background: var(--surface); font-size: 0.88rem; letter-spacing: normal;
  text-transform: none; cursor: pointer;
}
.goal-option:hover { background: var(--ground); }
.goal-option:has(input:checked) { background: var(--select); }
.goal-option.unavailable { color: var(--ink-soft); background: var(--ground); cursor: default; }
.goal-option input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; accent-color: var(--ink); }
.goal-option strong { display: block; overflow-wrap: anywhere; }
.goal-option small { display: block; margin-top: 0.15rem; color: var(--ink-soft); }
.goal-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); font-weight: 700; }
.goal-status { min-height: 1.5rem; margin: 0.75rem 0 0; font-weight: 600; color: var(--ink-soft); }
.goal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.75rem; }
button.action.primary { background: var(--select); }
button.action:disabled { cursor: wait; opacity: 0.55; }

/* ----------------------------------------------------------------- login -- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login form { width: min(22rem, 100%); }
label {
  display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.35rem;
}
input[type="text"], input[type="password"] {
  width: 100%; font: inherit; font-weight: 600; padding: 0.55rem 0.7rem;
  margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line);
}
input:focus-visible { outline: var(--rule) solid var(--select); outline-offset: 2px; }
.submit {
  width: 100%; font: inherit; font-weight: 700;
  letter-spacing: 0.01em; padding: 0.7rem;
  background: var(--select); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.submit:active { transform: translateY(1px); }
.error {
  border: 1px solid var(--line); background: var(--blocked);
  padding: 0.6rem 0.8rem; margin-bottom: 1rem; font-weight: 600; font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* A saved desktop preference must not leave the full sidebar open on a phone.
   Keep the navigation usable as an icon rail and let only the table scroll. */
@media (max-width: 48rem) {
  .sidebar,
  .sidebar.collapsed { width: 4.25rem; }
  .sidebar .nav-label,
  .sidebar .brand-text { display: none; }
  .main { padding: 1rem; }
  .tiles { grid-template-columns: 1fr; }
  .panel { padding: 1rem; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 2rem; }
  .bar-row .who { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- setup gaps -- */

.gap-save-status {
  min-height: 1.5rem; margin: -0.75rem 0 1rem;
  font-weight: 700;
}
.setup-filter {
  display: grid; gap: 0.3rem; min-width: min(22rem, 100%);
  padding: 0.75rem; border: 1px solid var(--line);
  background: var(--surface);
}
.setup-filter label {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.setup-filter select { width: 100%; min-width: 0; }
.gap-list { display: grid; gap: 1.25rem; }
.gap-card { min-width: 0; }
.gap-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line);
}
.gap-card-head h2 {
  margin: 0; font-size: 1.15rem; font-weight: 700;
}
.gap-card-head p {
  margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700;
}
.gap-reasons {
  display: grid; gap: 0.45rem; margin: 0.9rem 0 1rem; padding: 0;
  list-style: none;
}
.gap-reasons li {
  padding: 0.5rem 0.65rem; border: 1px solid var(--line);
  background: var(--warn); font-size: 0.82rem; font-weight: 600;
}
.gap-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.85rem; align-items: end;
}
.gap-field { min-width: 0; margin: 0; }
.gap-field span { display: block; margin-bottom: 0.35rem; }
.gap-field input[type="text"],
.gap-field input[type="number"],
.gap-field textarea,
.gap-field select {
  width: 100%; min-width: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: none;
}
.gap-field input[type="text"],
.gap-field input[type="number"],
.gap-field select { height: 2.75rem; }
.gap-field textarea { padding: 0.55rem 0.7rem; font: inherit; font-weight: 600; resize: vertical; }
.gap-hint {
  display: block; margin-top: 0.35rem; color: var(--ink-soft);
  font-size: 0.72rem; font-weight: 700; letter-spacing: normal; text-transform: none;
}
.billing-fields {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem;
}
.billing-reason { grid-column: 1 / -1; }
.gap-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.75rem; min-height: 2.75rem;
}
.gap-actions .goal-status { margin: 0; }
.gap-empty { font-weight: 600; }

@media (max-width: 64rem) {
  .gap-form { grid-template-columns: 1fr; }
  .billing-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-actions { justify-content: space-between; }
}
@media (max-width: 48rem) {
  .setup-filter { width: 100%; }
  .billing-fields { grid-template-columns: 1fr; }
  .billing-reason { grid-column: auto; }
}

/* ---------------------------------------------------------- specialist home -- */

.home-page-head { align-items: stretch; margin-bottom: 1.4rem; }
.home-title-block { align-self: center; }
.home-kicker {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.65rem; color: var(--ink-soft);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em;
}
.home-demo-badge,
.home-period-chip,
.home-live-label {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
  padding: 0.25rem 0.5rem; border: 1px solid var(--line); background: var(--ground);
  color: var(--ink-soft); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap;
}
.home-demo-badge { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.home-live-label i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
.home-controls {
  display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(18rem, 1fr);
  grid-template-rows: auto 1fr; gap: 0.3rem 1rem;
  width: min(40rem, 100%); padding: 0.75rem;
  border: 1px solid var(--line); background: var(--surface);
}
.home-controls > label { grid-column: 1; margin: 0; }
.home-controls > select { grid-column: 1; min-width: 0; width: 100%; }
.home-controls form { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.plan-input-row { display: flex; gap: 0.65rem; align-items: stretch; }
.plan-input-row input {
  width: 7rem; min-width: 0; margin: 0; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
}
.plan-input-row button { flex: 1; }
.plan-save-status {
  min-height: 1.35rem; margin: 0.35rem 0 0;
  color: var(--ink-soft); font-size: 0.76rem; font-weight: 600;
}
.home-overview {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 0.8fr);
  gap: 1.25rem; margin-bottom: 1.25rem;
}
.home-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--line);
}
.home-card-head h2,
.home-focus-card h2,
.motivation-panel h2 {
  margin: 0.15rem 0 0; font-size: 1rem; font-weight: 700;
}
.home-progress-card { padding: 1.2rem 1.35rem; }
.home-progress-body {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem;
  align-items: center; padding-top: 1.1rem;
}
.home-progress-ring { position: relative; width: 9rem; height: 9rem; }
.home-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.home-progress-ring circle { fill: none; stroke-width: 9; }
.home-progress-track { stroke: var(--ground); }
.home-progress-value {
  stroke: var(--select); stroke-linecap: square; stroke-dasharray: 264;
  stroke-dashoffset: 264; transition: stroke-dashoffset 0.45s ease;
}
.home-progress-ring > div {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.home-progress-ring strong {
  display: block; font-size: 1.75rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.home-progress-ring span {
  display: block; margin-top: 0.3rem; color: var(--ink-soft);
  font-size: 0.57rem; font-weight: 700; letter-spacing: 0.01em;
}
.home-progress-count {
  display: block; font-size: clamp(1.3rem, 2.4vw, 2.15rem); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1.05;
}
.home-progress-copy p {
  max-width: 32rem; margin: 0.65rem 0 0; color: var(--ink-soft); font-weight: 700;
}
.home-focus-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 100%; padding: 1.3rem; border-bottom: 10px solid var(--line);
}
.home-focus-card::before {
  content: ""; position: absolute; width: 9rem; height: 9rem; right: -3.5rem; top: -3.5rem;
  border: 1.5rem solid var(--ground); border-radius: 50%; opacity: 0.75;
}
.home-focus-card > * { position: relative; }
.home-focus-card.is-ok { border-bottom-color: var(--ok); }
.home-focus-card.is-warn { border-bottom-color: var(--warn); }
.home-focus-card.is-blocked { border-bottom-color: var(--blocked); }
.home-focus-card h2 { margin-top: 1.15rem; font-size: 1.4rem; line-height: 1.1; }
.home-focus-card > p { margin: 0.65rem 0 1.3rem; color: var(--ink-soft); font-weight: 700; }
.home-focus-footer {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--line);
}
.home-focus-footer span {
  color: var(--ink-soft); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.home-focus-footer strong { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.home-focus-footer strong.is-text { font-size: 1rem; }

.home-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;
}
.home-tiles .tile {
  min-width: 0; padding: 1rem 1.1rem; border-bottom-width: 1px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.home-tiles .tile:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgb(0 0 0 / 0.08); }
.home-tiles .tile.is-ok,
.home-tiles .tile.is-warn,
.home-tiles .tile.is-blocked { border-bottom-width: 7px; }
.tile-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tile-index { color: var(--ink-faint); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em; }
.tile-mark {
  display: grid; place-content: center; width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line); background: var(--ground); font-weight: 700;
}
.home-tiles .value { font-size: clamp(2rem, 3vw, 2.75rem); }
.home-tiles .value.is-text { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.tile-note { margin-top: 0.65rem; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }

.home-content-grid {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.75fr);
  gap: 1.25rem; align-items: start;
}
.home-payments { min-width: 0; padding: 1.2rem 1.35rem; }
.home-payments > .home-card-head { margin-bottom: 0.9rem; }
.home-table { min-width: 40rem; }
.home-empty { color: var(--ink-soft); font-weight: 600; }
.pill.ok { background: var(--ok); }
.home-side-column { display: grid; gap: 1.25rem; min-width: 0; }
.motivation-panel {
  position: relative; overflow: hidden; width: 100%; min-height: 11rem;
  padding: 1.35rem; background: var(--ink); color: var(--surface);
}
.motivation-panel::after {
  content: "“"; position: absolute; right: 0.8rem; bottom: -2.8rem;
  color: rgb(255 255 255 / 0.09); font: 700 11rem/1 Georgia, serif;
}
.motivation-panel .eyebrow { color: #a1a1aa; }
.motivation-panel h2 { padding-bottom: 0.7rem; border-bottom: 1px solid #3f3f46; }
.motivation-panel p {
  position: relative; z-index: 1; margin: 1rem 0 0;
  font-size: 1.1rem; font-weight: 600; line-height: 1.35;
}
.home-preview-card { padding: 1.2rem; }
.home-mini-chart {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem;
  height: 10rem; margin-top: 1.2rem; padding: 0 0.4rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.home-mini-chart > div {
  position: relative; display: flex; align-items: end; justify-content: center; gap: 0.18rem;
  height: 100%;
}
.home-mini-chart > div::before,
.home-mini-chart > div::after { content: ""; width: 0.58rem; border: 1px solid var(--line); }
.home-mini-chart > div::before { height: var(--fact); background: var(--select); }
.home-mini-chart > div::after { height: var(--plan); background: var(--surface); }
.home-mini-chart span {
  position: absolute; top: calc(100% + 0.35rem); font-size: 0.58rem;
  font-weight: 600; color: var(--ink-soft);
}
.home-chart-legend { display: flex; gap: 1rem; margin-top: 0.8rem; }
.home-chart-legend span {
  display: flex; align-items: center; gap: 0.35rem; color: var(--ink-soft);
  font-size: 0.65rem; font-weight: 600;
}
.home-chart-legend i { width: 0.65rem; height: 0.65rem; border: 1px solid var(--line); }
.home-chart-legend .fact { background: var(--select); }
.home-chart-legend .plan { background: var(--surface); }
.home-preview-note { margin: 0.8rem 0 0; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }
.home-source-note {
  display: grid; gap: 0.2rem; padding: 0.85rem 1rem;
  border: 1px dashed var(--ink-faint); background: transparent; color: var(--ink-soft);
}
.home-source-note span {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em;
}
.home-source-note strong { font-size: 0.78rem; }

@media (max-width: 72rem) {
  .home-overview,
  .home-content-grid { grid-template-columns: 1fr; }
  .home-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-source-note { grid-column: 1 / -1; }
}

@media (max-width: 56rem) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .home-controls { grid-template-columns: 1fr; grid-template-rows: auto; width: 100%; }
  .home-controls > label,
  .home-controls > select,
  .home-controls form { grid-column: 1; grid-row: auto; }
  .plan-input-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
  .home-progress-body { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
  .home-progress-ring { width: 7rem; height: 7rem; }
  .home-side-column { grid-template-columns: 1fr; }
  .home-source-note { grid-column: auto; }
  .home-table { min-width: 36rem; }
}

/* On a phone the state badge is the point of this table, and behind a sideways
   scroll it is the one thing nobody sees. Below 26rem the table gives up its
   minimum width and every column is trimmed, so the badge and its colour reach
   the edge of the screen. The last column still needs a nudge sideways at
   390 px — that is a compromise, not a finished answer. */
@media (max-width: 26rem) {
  .home-tiles { grid-template-columns: 1fr; }
  .home-progress-card,
  .home-payments { padding: 1rem; }
  .home-progress-body { grid-template-columns: 1fr; justify-items: start; }
  .home-card-head { align-items: flex-start; }
  .home-table { min-width: 36rem; font-size: 0.78rem; }
  .home-table th,
  .home-table td { padding: 0.45rem 0.3rem; }
  .home-table thead th { font-size: 0.6rem; letter-spacing: 0; }
  .home-table .pill { padding: 0.12rem 0.25rem; font-size: 0.62rem; letter-spacing: 0; }
  .home-table th:last-child,
  .home-table td:last-child {
    position: sticky; right: 0; z-index: 1; box-shadow: -8px 0 10px rgb(0 0 0 / 0.07);
  }
  .home-table th:last-child { z-index: 2; background: var(--ground); }
  .home-table td:last-child { background: var(--surface); }
}

/* ------------------------------------------------------ dashboard layout v2 --
   The visual language stays the same: square white surfaces, hard black rules,
   Onest and one blue accent. Only the information architecture follows the
   manager's reference: compact KPIs first, operations in the middle, trend and
   motivation last. */

.home-view { --home-gap: 1rem; }
.home-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-bottom: var(--home-gap);
}
.home-heading { min-width: 25rem; }
.home-heading h1 { font-size: clamp(1.9rem, 2.4vw, 2.35rem); white-space: nowrap; }
.home-heading p {
  margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.01em;
}
.home-eyebrow {
  display: block; margin-bottom: 0.25rem; color: var(--ink-soft);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em;
}
.home-header-tools { display: flex; align-items: stretch; justify-content: flex-end; gap: 0.75rem; }
.home-period-control {
  display: flex; align-items: center; gap: 0.65rem; min-width: 10rem;
  padding: 0.55rem 0.75rem; border: 1px solid var(--line); background: var(--surface);
}
.home-period-control svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--select); }
.home-period-control span {
  display: block; color: var(--ink-soft); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.home-period-control strong { display: block; font-size: 0.78rem; line-height: 1.2; }
.home-header-tools > .home-demo-badge { align-self: center; background: var(--surface); }

.home-controls {
  width: auto; min-width: 30rem; padding: 0.55rem 0.65rem;
  grid-template-columns: minmax(11rem, 0.9fr) minmax(15rem, 1.15fr);
  border: 1px solid var(--line);
}
.home-controls select { min-height: 2.55rem; box-shadow: none; }
.home-controls form { min-width: 0; }
.home-controls .plan-input-row { gap: 0.5rem; }
.home-controls .plan-input-row input { height: 2.55rem; border-width: 2px; }
.home-controls button.action { padding: 0.42rem 0.7rem; box-shadow: none; border-width: 2px; }
.home-controls .plan-save-status { min-height: 0; margin-bottom: -0.2rem; }

.home-top-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  gap: var(--home-gap); align-items: stretch;
}
.home-primary-column { display: grid; gap: var(--home-gap); min-width: 0; }
.home-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-gap); }
.home-stat-card {
  display: flex; align-items: center; gap: 0.8rem; min-width: 0; min-height: 7.25rem;
  padding: 1rem; border: 1px solid var(--line); background: var(--surface);
}
.home-stat-icon {
  display: grid; place-content: center; width: 2.7rem; height: 2.7rem; flex: none;
  border: 1px solid var(--line); background: #eaf2ff; color: var(--ink);
}
.home-stat-icon svg { width: 1.35rem; height: 1.35rem; }
.home-stat-card > div { min-width: 0; }
.home-stat-card > div > span {
  display: block; color: var(--ink-soft); font-size: 0.68rem;
  font-weight: 600; letter-spacing: 0.01em;
}
.home-stat-card strong {
  display: block; margin-top: 0.2rem; font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.home-stat-card strong.is-text { font-size: 1rem; letter-spacing: -0.01em; }
.home-stat-card small {
  display: block; margin-top: 0.35rem; color: var(--ink-soft);
  font-size: 0.62rem; font-weight: 700; line-height: 1.25;
}
.home-stat-card.is-unavailable { border-style: dashed; color: var(--ink-soft); }
.home-stat-card.is-unavailable .home-stat-icon { background: var(--ground); color: var(--ink-soft); }

.home-card { min-width: 0; padding: 1.05rem; border: 1px solid var(--line); background: var(--surface); }
.home-card h2 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.home-summary-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(12rem, 0.8fr); gap: var(--home-gap); }
.home-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-card-title strong { font-size: 1.65rem; font-weight: 700; line-height: 1; color: var(--ink); }
.home-progress-track {
  height: 1.2rem; margin-top: 1rem; overflow: hidden;
  border: 1px solid var(--line); background: var(--ground);
}
.home-progress-track span {
  display: block; width: 0; height: 100%; background: var(--select);
  transition: width 0.35s ease;
}
.home-progress-legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.7rem; }
.home-progress-legend > span {
  display: flex; align-items: center; gap: 0.35rem; color: var(--ink-soft);
  font-size: 0.66rem; font-weight: 600;
}
.home-progress-legend i { width: 0.58rem; height: 0.58rem; border: 1px solid var(--line); }
.home-progress-legend i.received { background: var(--select); }
.home-progress-legend i.target { background: var(--ink); }
.home-progress-legend i.remaining { background: var(--warn); }
.home-progress-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.home-plan-progress > p { margin: 0.65rem 0 0; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }
.home-average-card { display: flex; flex-direction: column; justify-content: center; }
.home-average-card > span {
  color: var(--ink-soft); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.01em;
}
.home-average-card > strong {
  display: block; margin-top: 0.55rem; font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
}
.home-average-card > strong.is-text { font-size: 1rem; letter-spacing: 0; }
.home-average-card > small { margin-top: 0.45rem; color: var(--ink-soft); font-size: 0.66rem; font-weight: 700; }

.home-card-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.home-attention-badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.42rem;
  border: 1px solid var(--line); background: var(--warn); font-size: 0.58rem;
  font-weight: 700; line-height: 1.15; white-space: nowrap;
}
.home-kpi-card { display: flex; flex-direction: column; }
.home-kpi-note { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }
.home-kpi-list { display: grid; gap: 0.7rem; margin-top: 0.85rem; }
.home-kpi-list > div {
  display: grid; grid-template-columns: 2rem minmax(7.5rem, 1fr) minmax(3.5rem, 0.7fr);
  gap: 0.55rem; align-items: center;
}
.home-kpi-list b {
  display: grid; place-content: center; width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line); background: var(--ground); font-size: 0.65rem;
}
.home-kpi-list span { font-size: 0.72rem; font-weight: 600; }
.home-kpi-list i { height: 0.5rem; border: 1px dashed var(--ink-faint); background: var(--ground); }
.home-kpi-list i.is-ok { border: 1px solid var(--line); background: var(--ok); }
.home-kpi-list i.is-warn { border: 1px solid var(--line); background: var(--warn); }
.home-kpi-list i.is-off { border: 1px solid var(--ink-faint); background: var(--ground); }
.home-kpi-list small {
  grid-column: 2 / -1; margin-top: -0.45rem; color: var(--ink-faint);
  font-size: 0.57rem; font-weight: 700;
}

.home-payments { margin-top: var(--home-gap); }
.home-payments-heading { align-items: center; }
.home-live-label { background: var(--surface); }
.home-focus-note {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.75rem 0; padding: 0.55rem 0.7rem; border: 1px solid var(--line);
  background: var(--ground); font-size: 0.72rem;
}
.home-focus-note.is-ok { background: var(--ok); }
.home-focus-note.is-warn { background: var(--warn); }
.home-focus-note.is-blocked { background: var(--blocked); }
.home-focus-dot { width: 0.55rem; height: 0.55rem; flex: none; border: 1px solid var(--line); background: var(--ink); }
.home-focus-note strong { font-weight: 700; }
.home-focus-note > span:last-child { color: var(--ink-soft); font-weight: 700; }
.home-focus-note.is-ok > span:last-child,
.home-focus-note.is-warn > span:last-child,
.home-focus-note.is-blocked > span:last-child { color: var(--ink); }
.home-payments .table-wrap { border-color: var(--line); }
.home-table { min-width: 42rem; }
.home-table th, .home-table td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.home-table th:nth-child(2) { text-align: right; }
.home-empty { color: var(--ink-soft); font-weight: 600; }
.pill.ok { background: var(--ok); }

.home-bottom-grid {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.75fr);
  gap: var(--home-gap); align-items: stretch; margin-top: var(--home-gap);
}
.home-chart-card { min-height: 17rem; }
.home-chart {
  display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: 0.5rem;
  height: 11.5rem; margin-top: 0.9rem;
}
.home-chart-scale {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: 1.3rem; color: var(--ink-faint); font-size: 0.55rem;
  font-weight: 700; text-align: right;
}
.home-chart-groups {
  display: grid; grid-template-columns: repeat(var(--months, 4), minmax(2.4rem, 1fr)); gap: 0.85rem;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), var(--line) 25%);
}
.home-chart-group { display: grid; grid-template-rows: 1fr 1.3rem; min-width: 0; text-align: center; }
.home-chart-bars { display: flex; align-items: end; justify-content: center; gap: 0.35rem; min-width: 0; }
.home-chart-bars i {
  position: relative; display: block; width: min(2rem, 35%); height: var(--bar);
  border: 1px solid var(--line); font-style: normal;
}
.home-chart-bars i.plan { background: repeating-linear-gradient(135deg, var(--ground) 0 4px, var(--surface) 4px 8px); }
.home-chart-bars i.fact { background: var(--select); }
.home-chart-bars em {
  position: absolute; left: 50%; bottom: calc(100% + 0.2rem); transform: translateX(-50%);
  font-size: 0.52rem; font-style: normal; font-weight: 700; white-space: nowrap;
}
.home-chart-group > span { align-self: end; font-size: 0.62rem; font-weight: 600; }
.home-chart-legend { display: flex; align-items: center; gap: 1rem; margin-top: 0.7rem; }
.home-chart-legend > span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.64rem; font-weight: 600; }
.home-chart-legend i { width: 0.65rem; height: 0.65rem; border: 1px solid var(--line); }
.home-chart-legend i.plan { background: repeating-linear-gradient(135deg, var(--ground) 0 3px, var(--surface) 3px 6px); }
.home-chart-legend i.fact { background: var(--select); }
.home-chart-legend small { margin-left: auto; color: var(--ink-soft); font-size: 0.6rem; font-weight: 700; }

.motivation-panel {
  position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center; gap: 0.8rem; width: 100%; min-height: 100%; padding: 1.2rem;
  overflow: hidden; background: var(--ink); color: var(--surface);
}
.motivation-panel::after { content: none; }
.motivation-panel .home-eyebrow { color: var(--ink-faint); }
.motivation-panel p { margin: 0.45rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.motivation-illustration { display: grid; place-content: center; }
.motivation-illustration svg { width: 6rem; height: 6rem; }

@media (max-width: 76rem) {
  .home-header { align-items: flex-start; }
  .home-heading { min-width: 0; }
  .home-heading h1 { white-space: normal; }
  .home-header-tools { flex-wrap: wrap; }
  .home-controls { order: 3; width: 100%; }
  .home-top-grid { grid-template-columns: 1fr; }
  .home-kpi-card { min-height: auto; }
  .home-kpi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  .home-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-bottom-grid { grid-template-columns: 1fr; }
  .motivation-panel { min-height: 12rem; }
}

@media (max-width: 48rem) {
  .home-view { --home-gap: 0.85rem; }
  .home-header { display: grid; }
  .home-header-tools { justify-content: flex-start; }
  .home-controls { min-width: 0; grid-template-columns: 1fr; }
  .home-controls > label,
  .home-controls > select,
  .home-controls form { grid-column: 1; grid-row: auto; }
  .home-summary-grid { grid-template-columns: 1fr; }
  .home-kpi-list { grid-template-columns: 1fr; }
  .home-chart { grid-template-columns: 2.9rem minmax(0, 1fr); }
  .home-chart-groups { gap: 0.4rem; }
  .home-chart-bars { gap: 0.18rem; }
  .home-chart-bars em { display: none; }
  .home-chart-legend { flex-wrap: wrap; }
  .home-chart-legend small { width: 100%; margin-left: 0; }
  .home-table { min-width: 36rem; }
}

@media (max-width: 26rem) {
  .home-heading h1 { font-size: 1.75rem; }
  .home-header-tools { display: grid; grid-template-columns: 1fr auto; }
  .home-controls { grid-column: 1 / -1; }
  .home-period-control { min-width: 0; }
  .home-stat-grid { gap: 0.65rem; }
  .home-stat-card {
    display: grid; align-content: start; gap: 0.65rem; min-height: 8.4rem; padding: 0.8rem;
  }
  .home-stat-icon { width: 2.15rem; height: 2.15rem; }
  .home-stat-icon svg { width: 1.05rem; height: 1.05rem; }
  .home-stat-card strong { font-size: 1.55rem; }
  .home-card { padding: 0.9rem; }
  .home-progress-legend { gap: 0.55rem; }
  .home-focus-note { display: grid; grid-template-columns: auto 1fr; }
  .home-focus-note > span:last-child { grid-column: 2; }
  .home-table { min-width: 36rem; font-size: 0.78rem; }
  .home-table th,
  .home-table td { padding: 0.45rem 0.3rem; }
  .home-table thead th { font-size: 0.6rem; letter-spacing: 0; }
  .home-table .pill { padding: 0.12rem 0.25rem; font-size: 0.62rem; letter-spacing: 0; }
  .home-table th:last-child,
  .home-table td:last-child {
    position: sticky; right: 0; z-index: 1; box-shadow: -8px 0 10px rgb(0 0 0 / 0.07);
  }
  .home-table th:last-child { z-index: 2; background: var(--ground); }
  .home-table td:last-child { background: var(--surface); }
  .home-chart-card { min-height: 15rem; }
  .home-chart { height: 9.5rem; }
  .motivation-panel { grid-template-columns: 4.75rem minmax(0, 1fr); min-height: 10rem; }
  .motivation-illustration svg { width: 4.5rem; height: 4.5rem; }
}

/* ------------------------------------------------------------- workspace -- */
/* «Мой день», «Рабочие листы», «Отдел», «В планах». Same rules as the rest:
   thin lines for ordinary blocks, the hard frame only for what is pressed,
   colour only for state — red overdue, amber due, green in order. */

.ws-filter { display: grid; gap: 0.3rem; }
.ws-filter label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); }
.ws-freshness { margin: -0.75rem 0 1.25rem; color: var(--ink-soft); font-weight: 700; font-size: 0.82rem; }
.ws-freshness.is-warn { color: var(--ink); border-left: 6px solid var(--warn); padding-left: 0.6rem; }

.ws-list { display: grid; gap: 0.9rem; }
.ws-item {
  background: var(--surface); border: 1px solid var(--line); border-left-width: 8px;
  padding: 0.9rem 1rem; display: grid; gap: 0.55rem; min-width: 0;
}
.ws-item.level-blocked { border-left-color: var(--blocked); }
.ws-item.level-warn { border-left-color: var(--warn); }
.ws-item.level-ok { border-left-color: var(--ok); }
.ws-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.8rem; }
.ws-module {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink-soft); border: 1px solid var(--line); padding: 0.1rem 0.4rem;
}
.ws-title-block { display: grid; gap: 0.1rem; min-width: 0; }
.ws-title { font-weight: 600; overflow-wrap: break-word; }
.ws-deal { font-size: 0.72rem; color: var(--ink-soft); }
.ws-signals { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ws-signals li {
  padding: 0.15rem 0.5rem; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600;
}
.ws-signals li.blocked { background: var(--blocked); }
.ws-signals li.warn { background: var(--warn); }
.ws-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; font-size: 0.85rem; }
.ws-facts dt { color: var(--ink-soft); font-weight: 700; }
.ws-facts dd { margin: 0; overflow-wrap: break-word; white-space: pre-wrap; }
.ws-tasks summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; }
.ws-tasks ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.ws-people { margin: 0; font-size: 0.75rem; color: var(--ink-soft); font-weight: 700; }
.ws-empty { color: var(--ink-soft); font-weight: 700; }

.ws-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
.ws-tab {
  flex: none; font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.45rem 0.8rem;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
.ws-tab[aria-selected="true"] { background: var(--select); box-shadow: var(--shadow-sm); }
.ws-tab:focus-visible, .ws-link:focus-visible, .ws-tile-button:focus-visible {
  outline: var(--rule) solid var(--select); outline-offset: 2px;
}
.ws-toolbar input[type="search"] {
  min-width: 0; width: min(22rem, 100%); padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); background: var(--surface); font: inherit;
}
.ws-count { margin: 0 0 0.75rem; color: var(--ink-soft); font-weight: 700; }

.ws-table { min-width: 64rem; }
.ws-table td { vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.ws-table tr.level-blocked td:first-child { box-shadow: inset 6px 0 0 var(--blocked); }
.ws-table tr.level-warn td:first-child { box-shadow: inset 6px 0 0 var(--warn); }
.ws-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* A signal is a sentence: in a wide table it must not fold into a column of
   single words at the right edge. */
.ws-table td:has(> .ws-pills) { min-width: 15rem; }
.ws-pills .pill { white-space: normal; text-transform: none; font-size: 0.72rem; }

.ws-department { min-width: 60rem; }
.ws-department thead th { text-align: center; white-space: normal; }
.ws-department td.num { text-align: center; }
.ws-alarm { box-shadow: inset 0 -5px 0 var(--blocked); }
.ws-link {
  font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-align: left; color: var(--ink);
}
.ws-tile-button { font: inherit; text-align: left; cursor: pointer; }
.ws-tile-button:hover { box-shadow: var(--shadow-sm); }
.ws-note { color: var(--ink-soft); font-weight: 700; font-size: 0.82rem; margin-top: 1rem; }

.ws-future { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.ws-future-card .ws-facts { grid-template-columns: 4.5rem 1fr; }

@media (max-width: 48rem) {
  .ws-toolbar { align-items: stretch; }
  .ws-toolbar label, .ws-toolbar input[type="search"], .ws-toolbar select { width: 100%; }
  .ws-facts { grid-template-columns: 1fr; }
  .ws-facts dt { margin-top: 0.3rem; }
}

.ws-table td.date, .ws-table td.num { white-space: nowrap; }
.pause-work { display: grid; gap: 0.25rem; max-width: 16rem; }
.pause-work.is-muted { color: var(--ink-soft); font-size: 0.8rem; }
.pause-work .pill { white-space: normal; text-transform: none; justify-self: start; }
#home-upsells { font-size: clamp(1.1rem, 1.45vw, 1.5rem); white-space: nowrap; }
.ws-move summary { cursor: pointer; font-weight: 600; }
.ws-move-form { display: grid; gap: 0.6rem; margin-top: 0.6rem; max-width: 36rem; }
.ws-move-field { display: grid; gap: 0.2rem; font-size: 0.82rem; font-weight: 700; }
.ws-move-field input, .ws-move-field textarea, .ws-move-field select {
  font: inherit; font-weight: 500; padding: 0.4rem 0.55rem; border: 1px solid var(--line); background: var(--surface);
  margin: 0;
}
.ws-move-field select { border: 1px solid var(--line); box-shadow: none; }
.ws-move-field input[type="checkbox"] { justify-self: start; width: 1.2rem; height: 1.2rem; padding: 0; }
.ws-move-form button { justify-self: start; }
.ws-move-status { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.ws-table .ws-move-col { width: 7.5rem; white-space: nowrap; }
.ws-move-open { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.ws-move-mark { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); white-space: normal; }
.ws-move-mark.is-conflict { color: var(--ink); border-left: 4px solid var(--warn); padding-left: 0.35rem; }
.ws-move-row td { background: var(--ground); }
/* The table scrolls sideways on a phone; the form stays where the eye is. */
#work-view .table-wrap { container-type: inline-size; }
.ws-create { margin: 0 0 1rem; }
.ws-leaves { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); background: var(--surface); }
.ws-summary { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); background: var(--surface); }
.ws-summary-title { margin: 0 0 0.5rem; font-size: 1rem; }
.ws-summary-table td { white-space: nowrap; }
.ws-summary-table th { white-space: normal; vertical-align: bottom; }
.ws-summary-table { min-width: 0; width: 100%; }
.ws-summary-table td.ws-summary-b3 { white-space: normal; min-width: 11rem; }
.ws-summary-table td.ws-summary-b3 .pill { white-space: normal; text-transform: none; }
.ws-summary-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.ws-month-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 0 1rem; }
.ws-month-label { font-weight: 600; }
.ws-month-select { min-height: 2.4rem; padding: 0 0.6rem; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; }
.ws-month-bar .ws-summary-note { flex-basis: 100%; margin: 0; }
.ws-progress { margin-top: 1rem; }
.ws-flow-note { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }
.ws-flow-table td { white-space: normal; }
.ws-flow-moves { white-space: nowrap; }
.ws-flow-moves .ws-move-open + .ws-move-open { margin-left: 0.4rem; }
.ws-flow-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
.ws-flow-form .ws-flow-note { flex-basis: 100%; margin: 0; }
.ws-flow-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.ws-flow-history { margin-top: 0.8rem; font-size: 0.85rem; }
.ws-flow-history-list { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.ws-flow-value { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
@media (max-width: 48rem) {
  .ws-flow-value { align-items: flex-end; text-align: right; }
}
.ws-plan-basis { margin: 0.6rem 0 0; font-size: 0.85rem; }
.ws-plan-basis summary { cursor: pointer; font-weight: 700; }
.ws-plan-basis ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ws-plan-basis li { margin: 0.25rem 0; }
.ws-progress .ws-summary-table td { white-space: normal; }
@media (min-width: 48.01rem) {
  .ws-progress .ws-summary-table th, .ws-progress .ws-summary-table td { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.ws-progress-value { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.ws-progress-main { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.ws-progress-sub { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.ws-change { padding: 0 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.ws-change.good { background: var(--ok); }
.ws-change.bad { background: var(--blocked); }
.ws-summary-note.warn { color: var(--ink); font-weight: 700; }
.ws-launches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ws-launches li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.ws-launches li:last-child { border-bottom: 0; }
.ws-launches-date { white-space: nowrap; }
.ws-launches-who { font-weight: 700; }
.ws-launches-sum { white-space: nowrap; }
.ws-pay { display: grid; gap: 0.15rem; justify-items: end; }
.ws-pay-parts { font-size: 0.75rem; color: var(--ink-soft); font-weight: 400; }
.ws-pay-missing { font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.ws-head { list-style: none; margin: 0; padding: 0; display: grid; }
.ws-head li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.ws-head-what { display: grid; gap: 0.25rem; justify-items: start; min-width: 0; }
.ws-head-what .pill { white-space: normal; text-transform: none; }
.ws-head-note { font-size: 0.78rem; color: var(--ink-soft); }
.ws-head-sum { white-space: nowrap; }
.ws-head-total { border-bottom: 0 !important; }
/* A phone: one card per person, each value under its column's name. */
@media (max-width: 48rem) {
  .ws-summary-table thead { display: none; }
  .ws-summary-table, .ws-summary-table tbody, .ws-summary-table tr, .ws-summary-table td { display: block; width: 100%; }
  .ws-summary-table tr { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .ws-summary-table td, .ws-summary-table td.num { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
    padding: 0.2rem 0; border: 0; white-space: normal; text-align: right; min-width: 0; }
  .ws-summary-table td.ws-summary-b3 { min-width: 0; }
  .ws-summary-table td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left;
    font-size: 0.72rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0.02em; }
  .ws-summary-table td:first-child { font-weight: 700; text-align: left; }
  .ws-summary-table td:first-child::before { content: none; }
}
.ws-dept { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; }
.ws-dept-tile { display: grid; gap: 0.15rem; align-content: start; padding: 0.6rem 0.7rem; border: 1px solid var(--line); background: var(--ground); }
.ws-dept-label { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.ws-dept-value { font-size: 1.15rem; }
.ws-dept-note { font-size: 0.75rem; color: var(--ink-soft); }
.ws-leaves-title { margin: 0 0 0.5rem; font-size: 1rem; }
.ws-leaves-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ws-leaves-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.ws-leaves-name { font-weight: 700; }
.ws-leaves-dates { color: var(--ink-soft); white-space: nowrap; }
.ws-leaves-remove { padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.ws-leaves-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.ws-leaves-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-top: 0.8rem; }
.ws-leaves-form .ws-move-field { min-width: 9rem; }
.ws-history { margin-top: 0.6rem; font-size: 0.82rem; }
.ws-history > summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.ws-history-list { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.ws-history-list li { display: grid; gap: 0.1rem; overflow-wrap: break-word; }
.ws-history-when { color: var(--ink-soft); font-size: 0.75rem; }
.ws-history-state { font-size: 0.75rem; font-weight: 700; }
.ws-history-note { margin: 0.4rem 0 0; color: var(--ink-soft); }
.ws-create > summary { display: inline-block; cursor: pointer; list-style: none; }
.ws-create > summary::-webkit-details-marker { display: none; }
.ws-create[open] > summary { margin-bottom: 0.25rem; }
.ws-move-inline { position: sticky; left: 0.75rem; max-width: min(36rem, calc(100cqw - 1.5rem)); }
.ws-pending { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.ws-conflict { margin: 0; font-size: 0.8rem; font-weight: 700; border-left: 6px solid var(--warn); padding-left: 0.5rem; }
.ws-writes { margin-top: 1.25rem; display: grid; gap: 0.6rem; justify-items: start; }
.ws-writes h2 { margin: 0; font-size: 1rem; }
.ws-writes p { margin: 0; }

/* ------------------------------------------------------- Yandex accounts -- */

.yandex-panel { margin-bottom: 1.25rem; }
.yandex-note { margin: 0 0 0.75rem; color: var(--ink-soft); max-width: 48rem; }
.yandex-status { min-height: 1.5rem; margin: 0 0 0.5rem; font-weight: 600; }
.yandex-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.yandex-account {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.75rem; border: 1px solid var(--line);
}
.yandex-account strong { overflow-wrap: anywhere; }
.yandex-account small { display: block; margin-top: 0.15rem; color: var(--ink-soft); }
.yandex-account .yandex-error { display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.4rem; background: var(--blocked); font-weight: 700; }
.yandex-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
a.yandex-connect {
  display: inline-block; font-weight: 700; padding: 0.5rem 0.8rem; color: var(--ink); text-decoration: none;
  background: var(--select); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
a.yandex-connect:focus-visible { outline: var(--rule) solid var(--select); outline-offset: 2px; }
a.yandex-connect[aria-disabled="true"] { opacity: 0.55; pointer-events: none; background: var(--surface); }

/* ------------------------------------------ the head's plan correction -- */

.ws-plan-line { margin-bottom: 0.6rem; }
.ws-plan-reason { color: var(--ink-soft); }
.ws-correction { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.35rem; }
.ws-correction input[type="number"] { width: 5rem; font: inherit; padding: 0.3rem 0.4rem; border: 1px solid var(--line); }
.ws-correction input[type="text"] { flex: 1 1 14rem; min-width: 0; font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--line); }
.ws-correction button.action { padding: 0.35rem 0.7rem; box-shadow: none; border-width: 2px; }

/* --------------------------------------------------------------- touches -- */

.touch-note { margin: 0 0 1rem; color: var(--ink-soft); max-width: 52rem; }
.touch-list { display: grid; gap: 1rem; }
.touch-card-head h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.touch-meta { margin: 0.2rem 0 0.6rem; color: var(--ink-soft); font-size: 0.85rem; }
.touch-block { margin-top: 0.75rem; }
.touch-block-head { margin-bottom: 0.35rem; }
.touch-text {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.9rem; line-height: 1.45;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); background: var(--ground);
}
.touch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.touch-status { color: var(--ink-soft); font-weight: 700; }
.touch-missing { margin: 0.5rem 0 0; color: var(--ink-soft); }
.touch-waiting summary { cursor: pointer; font-weight: 600; }
.touch-waiting ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.touch-waiting li { margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.yandex-reading { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.yandex-reading-accounts { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; }
.yandex-reading details { margin-bottom: 0.75rem; }
.yandex-reading summary { cursor: pointer; font-weight: 600; }
.yandex-reading details ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.yandex-reading details li { overflow-wrap: anywhere; margin-bottom: 0.2rem; }
.touch-balance { margin: 0 0 0.4rem; font-weight: 700; }
.touch-balance.low { display: inline-block; padding: 0.1rem 0.4rem; background: var(--blocked); }
.touch-low { border: 1px solid var(--line); background: var(--surface); }
.touch-low ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.touch-low li { overflow-wrap: anywhere; margin-bottom: 0.2rem; }

/* «Зарплата»: two filters side by side; the month total stands above its parts. */
.ws-filters { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ws-salary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.ws-salary-total span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); }
.ws-salary-total strong { font-size: 1.6rem; }
.ws-salary-tax { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-end; padding-bottom: 0.45rem;
  font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ws-salary-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
.ws-salary-figure { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; min-width: 0; }
.ws-salary-figure + .ws-salary-figure { border-left: 1px solid var(--line); }
.ws-salary-figure span { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.ws-salary-figure strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ws-salary-figure small { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.3; }
.ws-salary-heading { margin: 1rem 0 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.ws-salary-parts { min-width: 0; width: 100%; }
.ws-salary-parts td, .ws-salary-parts th { padding: 0.45rem 0.7rem; }
@media (max-width: 640px) { .ws-salary-parts .ws-salary-aux { display: none; } }
.ws-salary-parts td.num, .ws-salary-parts th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-salary-parts td:last-child { font-weight: 700; }
.ws-salary-bonus-row td { border-top: 2px solid var(--line); }
.ws-bar { position: relative; display: inline-block; width: 100%; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ws-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brand-crimson); }
.ws-bar.is-empty { visibility: hidden; }
.ws-bar-inline { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.ws-bar-inline .ws-bar { width: 72px; }
.ws-salary-bonuses { display: grid; gap: 0.35rem; }
.ws-salary-bonus { display: grid; grid-template-columns: 9.5rem minmax(80px, 180px) 1fr auto; align-items: center; gap: 0.8rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-salary-bonus-name { font-weight: 600; }
.ws-salary-bonus-text { font-size: 0.82rem; color: var(--ink-soft); min-width: 0; }
.ws-salary-bonus.is-reached .ws-bar > span { background: var(--ok); }
.ws-salary-bonus.is-reached strong { color: var(--ok); }
.ws-salary-bonus.is-unknown strong, .ws-salary-bonus.is-closed strong { color: var(--ink-soft); }
.ws-pay-chart { margin-top: 0.8rem; }
.ws-pay-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ws-pay-grid { stroke: var(--line); stroke-width: 1; }
.ws-pay-area { fill: url(#ws-pay-fill); }
.ws-pay-line { fill: none; stroke: var(--brand-crimson); stroke-width: 2.6; stroke-linecap: round; }
.ws-pay-line.is-forecast { stroke-dasharray: 7 6; }
.ws-pay-line.is-next { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 2 6; }
.ws-pay-dot { fill: var(--surface); stroke: var(--brand-crimson); stroke-width: 2; }
.ws-pay-dot.is-fact { fill: var(--brand-crimson); }
.ws-pay-x.is-now { font-weight: 700; fill: var(--ink); }
.ws-pay-dot.is-forecast { stroke: var(--ink-faint); }
.ws-pay-x { font-size: 11px; fill: var(--ink-soft); }
.ws-pay-value { font-size: 12px; font-weight: 700; fill: var(--ink); }
.ws-pay-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.2rem; }
.ws-pay-legend span::before { content: ''; display: inline-block; width: 18px; height: 0; margin-right: 0.35rem; vertical-align: middle;
  border-top: 2.5px solid var(--brand-crimson); }
.ws-pay-legend .is-forecast::before { border-top-style: dashed; }
.ws-pay-legend .is-next::before { border-top: 2.5px dotted var(--ok); }
.ws-grade-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin: 0 0 0.5rem; }
.ws-grade-left { margin-left: auto; font-size: 0.82rem; color: var(--ink-soft); }
.ws-grade-left.is-ready { color: var(--ok); font-weight: 700; }
.ws-grade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.ws-grade-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-grade-sign { flex: none; width: 1.2rem; text-align: center; font-weight: 800; color: var(--ink-faint); }
.ws-grade-list li.is-ok .ws-grade-sign { color: var(--ok); }
.ws-grade-list li.is-no .ws-grade-sign { color: var(--blocked); }
.ws-grade-label { flex: 1; min-width: 0; font-size: 0.88rem; }
.ws-grade-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-grade-months, .ws-grade-marks { display: inline-flex; gap: 0.3rem; flex: none; }
.ws-grade-month, .ws-grade-mark { font: inherit; font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); white-space: nowrap; }
button.ws-grade-month, .ws-grade-mark { cursor: pointer; }
.ws-grade-month.is-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ws-grade-month.is-no { background: var(--blocked-soft); color: var(--blocked); border-color: transparent; }
.ws-grade-month.is-marked { box-shadow: inset 0 0 0 1px currentColor; }
.ws-grade-mark.is-on { background: var(--brand-crimson); color: #fff; border-color: transparent; }
@media (max-width: 640px) {
  .ws-grade-list li { flex-wrap: wrap; }
  .ws-grade-label { flex: 1 1 calc(100% - 2rem); }
  .ws-grade-months, .ws-grade-marks, .ws-grade-value { margin-left: 1.8rem; }
  .ws-grade-left { margin-left: 0; flex-basis: 100%; }
  .ws-salary-top { grid-template-columns: 1fr; }
  .ws-salary-figure + .ws-salary-figure { border-left: 0; border-top: 1px solid var(--line); }
  .ws-salary-bonus { grid-template-columns: 1fr auto; }
  .ws-salary-bonus .ws-bar, .ws-salary-bonus-text { grid-column: 1 / -1; }
}
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------------ brand frame --
   Grampus, 19.10. The frame carries the brand; the data stays light. */

/* Surfaces: soft white cards, rounded, no hard edges. */
.panel, .tile, .home-card, .home-stat-card, .home-controls, .home-period-control,
.ws-item, .ws-leaves, .ws-summary, .setup-filter, .goal-dialog-card,
.gap-card, .home-source-note {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.table-wrap { border-radius: var(--radius-sm); border-color: var(--line); }
.panel > h2, .home-card-head, .home-card-heading { border-bottom: 1px solid var(--line); }
h1 { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.page-head p, .home-heading p { font-weight: 500; font-size: 0.85rem; letter-spacing: 0; }
.home-heading h1 { font-size: clamp(1.45rem, 2vw, 1.85rem); }

/* The menu: navy with the crimson glow of the brand backgrounds, the white logo. */
.sidebar {
  background:
    radial-gradient(120% 55% at 0% 100%, rgb(181 49 70 / 0.55), transparent 70%),
    radial-gradient(90% 40% at 100% 108%, rgb(159 66 59 / 0.45), transparent 70%),
    var(--brand-navy);
  border-right: 0;
  color: #fff;
}
.brand { border-bottom: 1px solid rgb(255 255 255 / 0.12); padding: 0.35rem 0.4rem 1rem; }
.brand-logo { display: block; width: 100%; max-width: 11.5rem; height: auto; }
.brand-mark {
  display: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 10px;
  background: var(--brand-crimson); color: #fff; font-weight: 700;
}
.sidebar.collapsed .brand-logo { display: none; }
.sidebar.collapsed .brand-mark { display: grid; }
.nav-item {
  border: 0; border-radius: 10px; color: rgb(255 255 255 / 0.72); font-weight: 500;
}
.nav-item:hover { background: rgb(255 255 255 / 0.08); color: #fff; border-color: transparent; }
.nav-item[aria-current="page"] {
  background: var(--brand-crimson); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgb(181 49 70 / 0.35);
}
.nav-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-item:disabled { opacity: 0.4; cursor: default; }

/* Controls: crimson for what is pressed, rounded fields. */
select, button.action, .submit, .goal-trigger, .dialog-close, .ws-tab, .ws-month-select,
input[type="text"], input[type="password"], input[type="number"], input[type="search"], .plan-input-row input {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: none;
}
button.action.primary, .submit {
  background: var(--brand-crimson); border-color: var(--brand-crimson); color: #fff;
}
button.action.primary:hover, .submit:hover { background: #9e2a3d; }
select:focus-visible, button.action:focus-visible, input:focus-visible, .legend button:focus-visible {
  outline: 2px solid var(--brand-crimson); outline-offset: 2px;
}
.goal-trigger:hover { background: var(--brand-crimson-soft); }

/* Tables: quiet header, thin rows. */
th, td { border-bottom: 1px solid var(--line); }
thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
tbody tr:hover { background: #f8f9fb; }

/* Status: tinted pills with coloured text. */
.pill {
  border: 0; border-radius: 999px; padding: 0.2rem 0.6rem;
  font-size: 0.72rem; font-weight: 600; background: var(--ground); color: var(--ink-soft);
}
.pill.ok { background: var(--ok-soft); color: #137a4f; }
.pill.warn { background: var(--warn-soft); color: #8a6100; }
.pill.blocked { background: var(--blocked-soft); color: #b42323; }
.pill.empty { background: var(--ground); color: var(--ink-soft); }

/* Tiles: the colour band becomes a thin accent line inside the card. */
.tile.is-ok, .tile.is-warn, .tile.is-blocked,
.home-tiles .tile.is-ok, .home-tiles .tile.is-warn, .home-tiles .tile.is-blocked {
  border-bottom-width: 1px; position: relative; overflow: hidden;
}
.tile.is-ok::after, .tile.is-warn::after, .tile.is-blocked::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
}
.tile.is-ok::after { background: var(--ok); }
.tile.is-warn::after { background: var(--warn); }
.tile.is-blocked::after { background: var(--blocked); }
.tile .label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; }
.tile .value { font-weight: 700; letter-spacing: -0.02em; }

/* «План текущего месяца»: the reference's tiles — an icon in a tinted circle, the figure beside. */
.home-stat-card { min-height: 0; padding: 0.95rem 1rem; gap: 0.85rem; }
.home-stat-icon {
  width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%;
  background: var(--brand-crimson-soft); color: var(--brand-crimson);
}
.home-stat-card:nth-child(2) .home-stat-icon { background: var(--ok-soft); color: var(--ok); }
.home-stat-card:nth-child(3) .home-stat-icon { background: var(--warn-soft); color: #b07d00; }
.home-stat-card:nth-child(4) .home-stat-icon { background: #ece9f8; color: #6a55c2; }
.home-stat-card > div > span { font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.home-stat-card strong { font-weight: 700; letter-spacing: -0.02em; }
.home-stat-card.is-unavailable { border-style: solid; }

.home-progress-track { height: 0.75rem; border: 0; border-radius: 999px; background: #edf0f4; }
.home-progress-track span { border-radius: 999px; background: linear-gradient(90deg, var(--brand-crimson), var(--brand-rust)); }
.home-progress-legend i { border: 0; border-radius: 50%; }
.home-progress-legend i.received { background: var(--brand-crimson); }
.home-progress-legend i.target { background: var(--brand-navy); }
.home-card-title strong { color: var(--brand-crimson); }

/* KPI Б1–Б4: bigger, the reference's badges and round bars. */
.home-kpi-card { padding: 1.2rem 1.25rem; }
.home-kpi-list { gap: 0.95rem; margin-top: 1rem; }
.home-kpi-list > div { grid-template-columns: 2.2rem minmax(8rem, 1fr) minmax(4.5rem, 0.8fr); gap: 0.7rem; }
.home-kpi-list b {
  width: 2rem; height: 2rem; border: 0; border-radius: 8px;
  background: var(--brand-navy); color: #fff; font-size: 0.75rem;
}
.home-kpi-list span { font-size: 0.88rem; font-weight: 600; }
.home-kpi-list i { height: 0.55rem; border: 0; border-radius: 999px; background: #edf0f4; }
.home-kpi-list i.is-ok { border: 0; background: var(--ok); }
.home-kpi-list i.is-warn { border: 0; background: var(--warn); }
.home-kpi-list i.is-off { border: 0; background: #edf0f4; }
.home-kpi-list small { font-size: 0.72rem; color: var(--ink-soft); margin-top: -0.55rem; }

.home-attention-badge, .home-live-label, .home-period-chip, .home-demo-badge { border: 0; border-radius: 999px; }
.home-focus-note { border: 0; border-radius: var(--radius-sm); }
.home-focus-note.is-ok { background: var(--ok-soft); }
.home-focus-note.is-warn { background: var(--warn-soft); }
.home-focus-note.is-blocked { background: var(--blocked-soft); }
.home-focus-dot { border: 0; border-radius: 50%; background: var(--blocked); }
.home-attention-badge { background: var(--warn-soft); color: #8a6100; }

/* The chart: plan pale, fact in brand crimson, rounded tops. */
.home-chart-groups { border-bottom: 1px solid var(--line); }
.home-chart-bars i { border: 0; border-radius: 6px 6px 0 0; }
.home-chart-bars i.plan { background: #d9dee8; }
.home-chart-bars i.fact { background: var(--brand-crimson); }
.home-chart-legend i { border: 0; border-radius: 50%; }
.home-chart-legend i.plan { background: #d9dee8; }
.home-chart-legend i.fact { background: var(--brand-crimson); }

/* Motivation: the brand background itself. */
.motivation-panel {
  border: 0; color: #fff;
  background:
    radial-gradient(90% 120% at 100% 100%, rgb(181 49 70 / 0.85), transparent 65%),
    radial-gradient(70% 90% at 0% 0%, rgb(159 66 59 / 0.35), transparent 70%),
    var(--brand-navy);
}
.motivation-panel .home-eyebrow { color: rgb(255 255 255 / 0.65); }
.motivation-panel p { font-weight: 600; }

/* Login: the brand background, a white card with the logo above it. */
.login {
  background:
    radial-gradient(80% 60% at 85% 100%, rgb(181 49 70 / 0.75), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgb(159 66 59 / 0.35), transparent 70%),
    var(--brand-navy);
  align-content: center; gap: 1.5rem;
}
.login form { border: 0; border-radius: var(--radius); box-shadow: 0 20px 50px rgb(0 0 0 / 0.3); }
.login form h1 { font-size: 1.4rem; }
.error { border: 0; border-radius: var(--radius-sm); background: var(--blocked-soft); color: #b42323; }

@media (max-width: 48rem) {
  .sidebar .brand-logo { display: none; }
  .sidebar .brand-mark { display: grid; }
  .brand { padding: 0.35rem 0 1rem; justify-content: center; }
}

/* The top: tiles keep their own height; the plan row takes what the KPI card leaves. */
.home-primary-column { grid-template-rows: auto 1fr; }
.home-stat-card { gap: 0.7rem; }
.home-stat-icon { width: 2.6rem; height: 2.6rem; }
.home-stat-card > div > span { white-space: nowrap; }
.home-stat-card small { font-size: 0.68rem; }
.motivation-panel p { font-size: 1.02rem; }

/* Medium widths: four tiles beside the KPI card are narrow — the icon goes above the words. */
@media (max-width: 96rem) {
  .home-stat-card { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .home-stat-icon { width: 2.3rem; height: 2.3rem; }
  .home-stat-icon svg { width: 1.15rem; height: 1.15rem; }
  .home-stat-card > div > span { white-space: normal; }
}
.home-plan-progress, .home-average-card { display: flex; flex-direction: column; justify-content: center; }
.home-plan-progress .home-progress-track { height: 0.9rem; }
@media (min-width: 76.01rem) { .home-top-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); } }

.bar-track { border: 0; border-radius: 999px; }
.legend .swatch { border: 0; border-radius: 50%; }
.legend button { border-radius: var(--radius-sm); }
.legend button:hover { border-color: transparent; }

/* 19.10, owner: «Там где средний чек убрать пустоты … и где шкала поменьше» — the plan and
   average cards take their own height, not the KPI card's. */
.home-top-grid { align-items: start; }
.home-primary-column { grid-template-rows: auto auto; }
.home-plan-progress, .home-average-card { justify-content: flex-start; }
.home-kpi-card { padding: 1rem 1.15rem; }
.home-kpi-list { gap: 0.75rem; margin-top: 0.8rem; }
.home-kpi-card .home-card-heading { padding-bottom: 0.5rem; }
.home-kpi-list { gap: 0.6rem; margin-top: 0.7rem; }
.home-kpi-list > div { row-gap: 0.15rem; }
.home-kpi-list small { margin-top: -0.35rem; line-height: 1.3; }

/* Borderline payments in «Отдел»: one card a payment, the head's move under it. */
.ws-borderline { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.ws-borderline h2 { margin: 0; font-size: 1rem; }
.ws-borderline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ws-borderline-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; display: grid; gap: 0.35rem; }
.ws-borderline-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.ws-borderline-sum { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ws-borderline-facts, .ws-borderline-counted, .ws-borderline-error { margin: 0; font-size: 0.85rem; }
.ws-borderline-facts { color: var(--ink-soft); }
.ws-borderline-counted.moved { color: var(--ok, #1f7a3d); font-weight: 600; }
.ws-borderline-error { color: #b42323; }
.ws-borderline-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ws-borderline-proof { flex: 1 1 14rem; min-width: 0; }
.ws-borderline-counted.refunded { color: var(--ink-soft); font-weight: 600; }

/* «Клиенты месяца» (owner, 20.10): the month sheet's table — the row tinted by its result as in the sheet,
   the tariff and the forecast coloured, the hand fields edited in place. */
.month-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.month-filter {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); color: var(--ink);
  padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.month-filter.is-active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.month-filter:disabled { opacity: 0.45; cursor: default; }
.month-wrap { max-height: 70vh; overflow: auto; }
.month-table { font-size: 0.86rem; min-width: 72rem; }
.month-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft, #f4f6f9); white-space: nowrap; }
.month-table td { vertical-align: top; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.month-table tr.is-paid td { background: #e6f5ea; }
.month-table tr.is-waiting td { background: #fff8d6; }
.month-table tr.is-overdue td { background: #fde4e4; }
.month-table tr.is-paused td { background: #dff6f8; }
.month-table tr.is-other td { background: #f1f3f6; }
.month-client { display: grid; gap: 0.2rem; min-width: 14rem; }
.month-marks { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.month-mark { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgb(38 46 57 / 0.08); color: var(--ink); }
.month-tariff { display: inline-block; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.month-tariff.tariff-1 { background: #d6e6ff; color: #1f4f9c; }
.month-tariff.tariff-2 { background: #fde0c2; color: #8a4a12; }
.month-tariff.tariff-3 { background: #fff1a8; color: #6e5a00; }
.month-stage { white-space: nowrap; }
.month-select, .month-input {
  width: 100%; min-width: 8.5rem; font: inherit; font-size: 0.85rem; border: 1px solid transparent;
  border-radius: 6px; background: rgb(255 255 255 / 0.7); padding: 0.25rem 0.4rem;
}
.month-upsell .month-input { min-width: 9rem; }
.month-comment textarea.month-input { min-width: 16rem; resize: vertical; field-sizing: content; max-height: 8rem; }
.month-select:hover, .month-input:hover { border-color: var(--line); }
.month-select:focus, .month-input:focus { border-color: var(--brand-navy); background: #fff; outline: none; }
.month-select.forecast-0 { background: #cdeed7; font-weight: 700; }
.month-select.forecast-5 { background: #e5dcf3; }
.month-select.forecast-6 { background: #f4b9b9; font-weight: 700; color: #7a1414; }
.month-select.forecast-1, .month-select.forecast-2, .month-select.forecast-3, .month-select.forecast-4 { background: #fff1be; }
.month-select.is-saving, .month-input.is-saving { opacity: 0.6; }
.month-select.is-saved, .month-input.is-saved { box-shadow: inset 0 0 0 1px var(--ok); }
.month-select.is-error, .month-input.is-error { box-shadow: inset 0 0 0 1px #b42323; }
/* On a phone the month table keeps its columns and scrolls sideways, as the sheet does;
   the old table's pinned last column would pin the comment. */
@media (max-width: 26rem) {
  .month-table { min-width: 64rem; font-size: 0.8rem; }
  .month-table th:last-child,
  .month-table td:last-child { position: static; box-shadow: none; }
  .month-filter { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
}
/* Rows as low as the sheet's: the fields sit flat in the cell until touched. */
.month-table td { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.month-table td.month-client-cell { min-width: 15rem; }
.month-select, .month-input { padding: 0.15rem 0.35rem; min-height: 0; line-height: 1.3; }
.month-forecast .month-select { min-width: 9rem; }
.month-upsell .month-input { min-width: 8rem; }
.month-comment textarea.month-input { min-width: 18rem; }
.month-table .month-stage { font-size: 0.8rem; }
/* The page's own input style is for forms; in the table the fields sit flat. */
.month-table input.month-input,
.month-table textarea.month-input,
.month-table select.month-select {
  height: auto; min-height: 0; margin: 0; padding: 0.15rem 0.35rem; box-shadow: none;
  border: 1px solid transparent; border-radius: 6px; font-size: 0.85rem; font-weight: 500;
}
.month-table input.month-input,
.month-table textarea.month-input { background: rgb(255 255 255 / 0.55); }
.month-table input.month-input:focus,
.month-table textarea.month-input:focus,
.month-table select.month-select:focus { border-color: var(--brand-navy); background: #fff; }
.month-table .month-person { white-space: nowrap; }
.month-table .month-input.is-saved, .month-table .month-select.is-saved { box-shadow: inset 0 0 0 1px var(--ok); }
.month-table .month-input.is-error, .month-table .month-select.is-error { box-shadow: inset 0 0 0 1px #b42323; }
@media (max-width: 26rem) {
  /* The client stays in sight while the row scrolls sideways. */
  .month-table td.month-client-cell { position: sticky; left: 0; z-index: 1; min-width: 11rem; box-shadow: 6px 0 8px rgb(0 0 0 / 0.06); }
  .month-table td.month-client-cell .month-client { min-width: 0; }
}
@media (max-width: 26rem) {
  /* On a phone the person column gives way: the client stands next to the date. */
  .month-table .month-person, .month-table #home-employee-column { display: none; }
  .month-table td.month-client-cell { position: static; box-shadow: none; }
}

/* 20.10, owner: «полосы разделяющие посильнее» — every cell and row ruled, as in the sheet. */
.month-table { border-collapse: collapse; }
.month-table th, .month-table td { border: 1px solid #c5ccd6; }
.month-table thead th { border-bottom: 2px solid #8d97a6; }
.month-offer .month-select { min-width: 5.5rem; }
.month-select.offer-yes { background: #d9f0dc; font-weight: 700; }
/* 20.10, owner: one whole line by default — the first, the newest note; stretched by hand, it keeps the size. */
.month-table .month-comment textarea.month-input {
  field-sizing: fixed; height: 1.75rem; min-height: 1.75rem; max-height: 20rem; resize: vertical; overflow-y: auto;
}

/* 20.10, owner: «сделай красивую ракету». The brand's crimson and navy on a light body; the flame
   breathes and the trail drifts, still for those who asked the system for less motion. */
.motivation-illustration svg.rocket { width: 8.5rem; height: 8.5rem; overflow: visible; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.35)); }
.rocket .rocket-flame { transform-origin: 60px 82px; animation: rocket-flame 0.9s ease-in-out infinite alternate; }
.rocket .rocket-trail { animation: rocket-trail 1.6s ease-in-out infinite alternate; }
.rocket .rocket-stars { animation: rocket-stars 3s ease-in-out infinite alternate; }
@keyframes rocket-flame { from { transform: scaleY(0.82); } to { transform: scaleY(1.08); } }
@keyframes rocket-trail { from { opacity: 0.2; } to { opacity: 0.5; } }
@keyframes rocket-stars { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rocket .rocket-flame, .rocket .rocket-trail, .rocket .rocket-stars { animation: none; }
}
@media (max-width: 48rem) { .motivation-illustration svg.rocket { width: 5rem; height: 5rem; } }

/* One line exactly: no half-cut line under it. */
.month-table .month-comment textarea.month-input { line-height: 1.35; height: calc(1.35em + 0.3rem + 2px); min-height: calc(1.35em + 0.3rem + 2px); }

/* 20.10, owner: «Давай заполним пространство обратно и шкала уже предзаполнена
   изначально». The plan and average cards reach the KPI card's height again,
   their content centred so no empty bottom shows; a KPI bar is a track that
   fills by how far the bonus is, in the colour of its state. */
.home-top-grid { align-items: stretch; }
.home-primary-column { grid-template-rows: auto 1fr; }
.home-plan-progress, .home-average-card { justify-content: center; }
.home-kpi-list i, .home-kpi-list i.is-ok, .home-kpi-list i.is-warn, .home-kpi-list i.is-off {
  position: relative; overflow: hidden; background: #edf0f4; }
.home-kpi-list i > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink-faint); }
.home-kpi-list i.is-ok > span { background: var(--ok); }
.home-kpi-list i.is-warn > span { background: var(--warn); }

/* 20.10, owner: B4 «замочек … активация после 90% сохранения». */
.home-kpi-list i.is-locked { height: auto; background: none; overflow: visible; display: flex; justify-content: flex-end; color: var(--ink-faint); }
.home-kpi-list i.is-locked svg { width: 18px; height: 18px; }
.home-kpi-list > div.is-locked > b { background: var(--ink-faint); }
.home-kpi-list > div.is-locked > span { color: var(--ink-soft); }
.ws-salary-bonus .ws-lock { justify-self: start; width: 16px; height: 16px; color: var(--ink-faint); }

/* 20.10: the head's Yandex application form, whose account, the access check. */
.yandex-app { margin: 0.6rem 0; border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.8rem; }
.yandex-app summary { cursor: pointer; font-weight: 700; }
.yandex-app-form { display: grid; gap: 0.55rem; margin-top: 0.6rem; max-width: 34rem; }
.yandex-app-form label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--ink-soft); }
.yandex-app-form input { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.yandex-app-form button { justify-self: start; }
.yandex-owner { font: inherit; font-size: 0.82rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 8px; max-width: 16rem; }
.yandex-access { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0.7rem 0; }