/* The operator's console and portal: white working surfaces, a forest frame, vivid lime selection and sans
   headings. Shared tokens in brand.css keep these working screens consistent with the site and booking.
   BUTTONS — one rule for every working screen (brand.css, «The working screens' buttons»):
     main    the screen's main action — forest, paper words: a plain <button>, .btn;
     key     the page's single key action — lime, ink words: .lime;
     second  an ink outline on nothing: .ghost;
     danger  a muted red outline, red words: .danger, .delete-row, .remove-item — red for danger alone;
     quiet   underlined words: a link, .logout. */
.console-menu-toggle,
.console-skip {
  display: none;
}
.console {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
}
.sidebar {
  --ink: var(--on-forest);
  --muted: var(--forest-muted);
  --shade: #254638;
  --rule: #365748;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--forest);
  border-right: 1px solid var(--rule);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sidebar .brand {
  font-size: 25px;
}
.workspace-label {
  margin-bottom: -18px;
  padding-left: 12px;
}
.sidebar nav {
  display: grid;
  gap: 2px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  color: var(--ink);
}
.sidebar nav a span {
  font-size: 15px;
  font-weight: 500;
}
.sidebar nav a:hover {
  background: var(--shade);
}
/* The page one is on: the forest key, as the cabinet's menu */
.sidebar nav a.active {
  background: var(--lime);
  color: var(--forest);
}
.sidebar nav a.active:focus-visible {
  outline-color: var(--ink);
}
.sidebar :is(a, button):focus-visible {
  outline-color: var(--lime);
}
.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-left: 12px;
}
.sidebar-bottom > a,
.logout {
  justify-self: start;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.logout {
  border: 0;
  background: none;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 0;
  text-align: left;
}
/* «Панель оператора»: a quiet line with its dot, not a pill */
.sidebar-bottom .pill {
  justify-self: start;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.sidebar-bottom .pill .dot {
  background: var(--lime);
}
.control-main {
  width: 100%;
  max-width: 1330px;
  margin: 0 auto;
  padding: 36px 48px 80px;
  min-width: 0;
}
.page-context {
  margin-bottom: 24px;
}
.control-main :is(h1, h2, h3) {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
.control-main h1 {
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.control-main h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.control-main h3 {
  font-size: 18px;
  line-height: 1.3;
}
.control-main p {
  font-size: 15px;
  line-height: 1.6;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}
.page-head h1 {
  margin-bottom: 8px;
}
.page-head p {
  margin: 0;
}
.page-head .eyebrow {
  margin-bottom: 8px;
}
/* A card: the banner's — the sheet, a 1 px edge, the hard offset shadow, 4 px corners */
.card,
.panel {
  border: 1px solid var(--card-edge);
  background: var(--sheet);
  border-radius: var(--card-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
}
.panel.accent {
  background: var(--band);
}
/* The figures over a list («Клиентов в сервисе 7»): one sheet, a hairline between its cells (each cell's right and
   bottom edge, the outer ones under the sheet's edge), the numbers in mono */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background: var(--sheet);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.site-setup-guide { margin-bottom: 24px; padding: 20px; border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--sheet); }
.site-setup-guide ol { padding-left: 24px; }
.site-setup-guide li + li { margin-top: 8px; }
.stat {
  padding: 20px 22px;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin: 0 -1px -1px 0;
}
.stat small {
  font-size: 13px;
  color: var(--muted);
}
.stat strong {
  display: block;
  font-family: var(--mono);
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.row,
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.row {
  justify-content: space-between;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.grid > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-section {
  background: var(--sheet);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  margin: 0 0 24px;
  padding: 24px;
  min-width: 0;
  box-shadow: var(--card-shadow);
}
.form-section > legend {
  float: left;
  width: 100%;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
}
.form-section > legend + * {
  clear: both;
}
.form-section > p {
  font-size: 13px;
}
.form-section > label,
.form-section > input {
  margin-bottom: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.form-grid > .wide {
  grid-column: 1/-1;
}
.form-grid input {
  margin: 0;
}
.control-main label {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 500;
}
.control-main input,
.control-main select {
  font-size: 15px;
}
/* The buttons' faces (the rule at the top): a plain button is the main action, .ghost the second */
.control-main button:not(.btn):not(.logout):not(.delete-row) {
  border: 1px solid var(--forest);
  border-radius: var(--control-radius);
  padding: 11px 18px;
  background: var(--forest);
  color: var(--on-forest);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.control-main button:not(.btn):not(.logout):not(.delete-row):hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
}
.control-main button.ghost:not(.btn):not(.logout):not(.delete-row) {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--faint);
}
.control-main button.ghost:not(.btn):not(.logout):not(.delete-row):hover {
  background: var(--shade);
  border-color: var(--forest);
}
.control-main button.lime:not(.btn):not(.logout):not(.delete-row) {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.control-main :is(button.danger, button.bad):not(.btn):not(.logout):not(.delete-row) {
  background: transparent;
  color: var(--error);
  border-color: var(--error-edge);
}
.control-main :is(button.danger, button.bad):not(.btn):not(.logout):not(.delete-row):hover {
  background: var(--error-tint);
  border-color: var(--error);
}
/* «Есть изменения — Сохранить»: a sheet at the window's foot while the form scrolls */
.save-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  bottom: 12px;
  padding: 14px 20px;
  background: var(--sheet);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  z-index: 5;
}
.save-bar span {
  font-size: 13px;
  color: var(--muted);
}
.service-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 1fr auto;
  gap: 13px;
  align-items: end;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.delete-row {
  border: 1px solid var(--error-edge);
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--error);
  width: 39px;
  height: 45px;
  font-size: 20px;
  cursor: pointer;
  align-self: end;
}
.delete-row:hover {
  background: var(--error-tint);
  border-color: var(--error);
}
/* On a phone the console's fields of the row are 51 px (16 px type, so the screen does not zoom); «×» takes the same
   box. The administrator's desk shares this sheet, its fields are 44 px and its «×» stays so. */
@media (max-width: 760px) {
  .console .service-row .delete-row {
    height: auto;
    min-height: 51px;
  }
}
/* A heading after a form's button («Сохранить Битрикс24» → «Подсказки и очередь» on the B2B company's card,
   «Отметить «Оплачено»» → «По организациям» on the month's bill): the gap other sections keep between a form and the
   next heading, not a line's worth */
.control-main fieldset > h3:not(:first-child),
.control-main form + h2,
.control-main form + h3 {
  margin-top: 28px;
}
.service-row label {
  margin: 0;
  font-size: 12px; /* a narrow column of the row: «Цена для клиента», «Мест в группе» stay whole */
  font-weight: 400;
}
.service-row .service-description { grid-column: 1/-1; }
.hours-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.hours-grid input {
  font-size: 13px;
  padding: 10px 7px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.hours-grid label {
  font-size: 12px;
}
/* A notice: a strip with a rule at its left, in its tone — green what is done, the warm yellow what waits, the pale
   red what failed; the words are ink */
.notice {
  padding: 14px 18px;
  background: var(--band);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--forest);
  border-radius: var(--card-radius);
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.6;
}
.notice.warning {
  background: var(--warn-tint);
  border-color: #e6d6a6;
  border-left-color: #b8862a;
}
.notice.error {
  background: var(--error-tint);
  border-color: var(--error-edge);
  border-left-color: var(--error);
  color: var(--error);
}
.notice:empty {
  display: none;
}
/* A status («Не настроена», «Оплачено»): a small chip, 4 px corners, its tone's tint and words */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  padding: 2px 8px;
  border-radius: var(--card-radius);
  background: var(--shade);
  color: var(--ink);
  white-space: nowrap;
}
.tag.ok {
  background: var(--ok-tint);
  color: var(--ok);
}
.tag.warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.tag.bad {
  background: var(--error-tint);
  color: var(--error);
}
/* Tables: hairlines between rows, the head in muted sentence case on nothing, figures in mono */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
th {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  padding: 12px 14px;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td {
  border-bottom: 1px solid var(--hair);
  padding: 14px 14px;
  vertical-align: middle;
}
td a {
  text-decoration: none;
}
td small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--paper);
}
.table-panel {
  padding: 0;
  overflow: hidden;
}
.toolbar {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.toolbar input {
  max-width: 320px;
  font-size: 14px;
}
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.empty h3 {
  font-size: 20px;
  color: var(--ink);
}
.copy-field {
  display: flex;
  gap: 10px;
  min-width: 0;
}
.copy-field input {
  font-size: 13px;
  font-family: var(--mono);
  background: var(--paper);
  min-width: 0;
}
.copy-field button {
  flex-shrink: 0;
}
.breadcrumbs {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumbs a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.two-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 25px;
  align-items: start;
}
/* A fold: a sheet with a hairline edge, its title the line to tap */
.control-main details {
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--sheet);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.control-main summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.control-main details[open] > summary {
  margin-bottom: 18px;
}
.control-main details p {
  font-size: 14px;
}
.control-main details.client-demos {
  border-color: #c8c3e1;
  background: #f4f1fa;
}
.client-demos > summary {
  color: #51447a;
}
.client-demos > summary .tag {
  margin-left: 10px;
}
.tag.demo {
  background: #e6dff5;
  color: #51447a;
}
.client-demos tbody tr {
  background: #f4f1fa;
}
.client-demos caption {
  padding: 12px;
  text-align: left;
  font-weight: 600;
}
.client-demos .panel {
  margin-top: 20px;
  margin-bottom: 0;
}
.checklist {
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.checklist li {
  padding-left: 7px;
  margin-bottom: 15px;
}
.checklist b {
  display: block;
  color: var(--ink);
}
.price-big {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.price-big small {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}
.portal {
  background: var(--paper);
}
.portal .control-main {
  max-width: 920px;
  padding-top: 32px;
}
.portal .page-context {
  margin-top: 32px;
}
.portal .card {
  padding: 28px;
}
.portal .control-main h1 {
  font-size: 36px;
}
.login {
  max-width: 450px;
  margin: 70px auto;
}
.login h1 {
  font-size: 32px;
}
.login input {
  margin: 10px 0 18px;
}
.login button {
  width: 100%;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--on-forest);
  border-radius: var(--card-radius);
  font-size: 14px;
}
.inline {
  display: inline;
}
.inline input {
  width: 230px;
}
/* The field and the button of one line («Проверить на своём номере», «Получить код») stand one height: the button
   is 50 px (.btn), the field was 48 */
.inline input,
.inline button,
.inline .btn {
  min-height: 50px;
  box-sizing: border-box;
  vertical-align: middle;
}
.inline button {
  font-size: 13px;
}
.billing-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 15px;
}
/* «Мои записи»: «Своё дело?» at the page's foot (app/channels/web.py), as quiet as a company page's own footer. */
.my-join {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.my-join a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--faint);
}
.my-join a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.control-main .card > label + input {
  margin-bottom: 15px;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.guide-grid .card {
  margin: 0;
}
.guide-grid li {
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.6;
}
/* «Руководства» (app/control_guides.py): a calm list in three groups — hairlines, no cards — and a guide as one
   reading column beside its contents; an item's tick is a quiet square, the journal a table that stacks on a phone. */
.guides-group {
  margin: 0 0 32px;
  max-width: 860px;
}
.guides-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.guides-entry {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.guides-title {
  font-size: 17px;
  font-weight: 600;
  text-underline-offset: 3px;
}
.guides-entry p {
  margin: 4px 0 0;
}
.guides-meta,
.guide-about {
  color: var(--muted);
  font-size: 14px;
}
.guide-back {
  margin: 0 0 12px;
}
.guide-back a,
.guide-toc a {
  text-decoration: none;
}
.guide-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0 0 24px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.control-main details.guide-reset,
.control-main details.guide-toc {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0;
}
.control-main .guide-reset > summary {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.control-main .guide-reset[open] > summary {
  margin-bottom: 0;
}
.guide-reset form {
  margin-top: 10px;
  max-width: 520px;
}
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
  align-items: start;
}
.guide-body {
  grid-column: 1;
  grid-row: 1;
  max-width: 780px;
  min-width: 0;
  container-type: inline-size; /* the journal's rows follow the reading column, not the screen */
}
.control-main details.guide-toc {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 24px;
  padding-left: 16px;
  border-left: 1px solid var(--rule);
  font-size: 14px;
}
.control-main .guide-toc[open] > summary {
  margin-bottom: 8px;
}
/* The list scrolls, not the fold: a scrolling fold cut the focus ring of «Содержание» off (3 px, 5 px away — brand.css).
   8 px around the links keep their own rings whole; the fold, «Содержание» and its gap stay within the screen. */
.guide-toc nav {
  max-height: calc(100vh - 96px);
  overflow: auto;
  margin: -8px;
  padding: 8px;
}
.guide-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-toc li {
  margin: 6px 0;
}
.guide-toc ol ol {
  padding-left: 14px;
  color: var(--muted);
}
.guide-body :is(h2, h3) {
  scroll-margin-top: 16px;
}
.guide-body h2 {
  margin: 36px 0 12px;
}
.guide-body h3 {
  margin: 24px 0 8px;
}
.guide-body :is(p, li) {
  font-size: 15px;
  line-height: 1.65;
}
.guide-body img {
  max-width: 100%;
  height: auto;
}
.guide-figure {
  margin: 20px 0;
}
.guide-figure figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}
.guide-body blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
.guide-body code {
  font-variant-ligatures: none; /* «<!--» stays three characters, not the font's arrow */
}
.guide-code {
  font-variant-ligatures: none;
  background: var(--shade);
  border-radius: var(--control-radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  white-space: pre;
  overflow-x: auto;
  font: 13px/1.6 var(--mono);
}
.control-main button.guide-copy:not(.btn):not(.logout):not(.delete-row) {
  display: block;
  margin: 12px 0 6px auto;
  padding: 4px 10px;
  font-size: 13px;
}
.guide-checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
}
.guide-checklist .guide-checklist {
  margin: 8px 0 0;
}
.guide-check {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  padding: 2px 0;
  border-bottom: 1px solid var(--hair);
}
.guide-box {
  margin: 0;
}
.control-main .guide-check button.guide-tick:not(.btn):not(.logout):not(.delete-row) {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
}
.guide-tick::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--faint);
  border-radius: 6px;
  background: var(--sheet);
}
.control-main .guide-check button.guide-tick:not(.btn):not(.logout):not(.delete-row):hover::before {
  border-color: var(--forest);
}
.guide-tick[aria-pressed="true"]::before {
  border-color: var(--forest);
  background: var(--forest);
}
.guide-tick[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 7px;
  height: 12px;
  border: solid var(--on-forest);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.guide-check-body {
  min-width: 0;
  padding: 10px 0 8px;
}
.guide-check-text {
  margin: 0;
}
/* A guide's words are ink, as the cabinet's (desk.css): brand.css greys every paragraph, so a guide's paragraphs stood
   grey beside its ink lists and tables, and a ticked item looked like an unticked one. The hints, the ticks' lines and
   the quotes stay grey; a ticked item's words turn grey. */
:where(.guide-body) p:not(.hint, .guide-check-meta) {
  color: var(--ink);
}
.guide-body blockquote p {
  color: inherit;
}
.guide-check.is-done .guide-check-text {
  color: var(--muted);
}
.guide-check-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.guide-check-meta:empty {
  display: none;
}
.guide-check-meta .tag {
  margin-right: 6px;
}
.guide-body .table-scroll {
  --table-bg: var(--paper); /* a guide's tables stand on the page itself */
}
.guide-journal {
  margin: 16px 0 24px;
}
.guide-journal-table select,
.guide-journal-table input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 8px 10px;
  font-size: 14px;
}
/* A row's fields and its «Сохранить» stand at the console's one height (--control-h); on a phone or under a finger the
   reset and «Скопировать» too, as .btn.small (brand.css). */
.control-main .guide-row-save button:not(.btn):not(.logout):not(.delete-row) {
  min-height: var(--control-h);
}
@media (max-width: 760px), (pointer: coarse) {
  .control-main .guide-reset button:not(.btn):not(.logout):not(.delete-row),
  .control-main button.guide-copy:not(.btn):not(.logout):not(.delete-row) {
    min-height: var(--control-h);
  }
}
.guide-journal-table .tag {
  margin-left: 6px;
}
.guide-row[data-status="passed"] select {
  background: var(--ok-tint);
  border-color: var(--ok);
}
.guide-row[data-status="failed"] select {
  background: var(--error-tint);
  border-color: var(--error-edge);
  color: var(--error);
}
.guide-row[data-status="skipped"] select {
  color: var(--muted);
}
.guide-row-save form {
  margin: 0;
}
.guide-row-meta:empty {
  display: none;
}
/* Where the reading column holds it (the 708 px of its columns and gaps), a row of the journal is two lines: the check
   and its sum, then its fields under their own small names — the statuses, days and numbers of all rows stand in the
   same columns. The column decides, not the screen: beside the contents of a laptop it may be narrower than a tablet. */
@container (min-width: 720px) {
  .guide-journal .table-scroll {
    overflow: visible;
    background: none;
  }
  .guide-journal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .guide-journal-table,
  .guide-journal-table tbody {
    display: block;
  }
  .guide-journal-table tr {
    display: grid;
    grid-template-columns: 128px 150px 120px minmax(120px, 1fr) 150px;
    gap: 6px 10px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .guide-journal-table tbody tr:hover {
    background: none;
  }
  table.log.guide-journal-table td {
    display: block;
    padding: 0;
    border: 0;
  }
  .guide-journal-table td:first-child {
    grid-column: 1 / 5;
    grid-row: 1;
    font-size: 15px;
    font-weight: 500;
  }
  .guide-journal-table td.guide-sum {
    grid-column: 5;
    grid-row: 1;
    text-align: right;
    font-size: 14px;
  }
  .guide-journal-table td[data-label]:not(.guide-sum)::before,
  .guide-journal-table .guide-row-save::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  .guide-journal-table .guide-row-save::before {
    content: "\00a0"; /* the fields' names' line: the button stands level with the fields */
  }
  .guide-journal-table .guide-row-save {
    grid-column: 5;
    grid-row: 2;
  }
  .guide-row-meta {
    font-size: 12px;
  }
}
@media (max-width: 1100px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .control-main details.guide-toc {
    grid-column: 1;
    grid-row: 1;
    position: static;
    margin-bottom: 20px;
    padding: 0 0 4px;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  .guide-toc nav {
    max-height: none;
    overflow: visible;
  }
  .guide-body {
    grid-row: 2;
  }
}
/* A narrower column — a phone's, or a laptop's beside the contents — makes each row a card, as table.stack does on a
   phone: the check on top, then «name — field» two to a line. */
@container (max-width: 719.98px) {
  .guide-journal .table-scroll {
    overflow: visible;
    background: none;
  }
  .guide-journal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .guide-journal-table,
  .guide-journal-table tbody {
    display: block;
  }
  .guide-journal-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
  }
  .guide-journal-table tbody tr:hover {
    background: none;
  }
  table.log.guide-journal-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  table.log.guide-journal-table td:first-child {
    display: block;
    grid-column: 1 / -1;
    padding-bottom: 6px;
  }
  .guide-journal-table td.wide {
    grid-column: 1 / -1;
  }
  .guide-journal-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
  }
}
/* «Фоновые процессы»: a tile per job, its name and its badge («Работает») in a row that wraps — the badge at the end of
   the name's first line, or under the name when the two do not fit side by side; never stretched, cut or over the
   tile's edge (the owner, 05.10.2026: «Работа», «Работае…» at the middle of the tile since the banner style). */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.status-item {
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;
  justify-content: space-between;
  gap: 6px 12px;
  min-width: 0;
}
.status-item > :first-child {
  flex: 1 1 9em;
  min-width: 0;
  overflow-wrap: break-word;
}
.status-item > .tag {
  flex: none;
  max-width: 100%;
}
.pending {
  color: var(--warn);
}
.err:empty {
  display: none;
}
.check input {
  margin-right: 8px;
}
code {
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}
pre {
  white-space: pre-wrap;
  font: 13px/1.8 inherit;
  overflow-wrap: anywhere;
}
.secret-link {
  overflow-wrap: anywhere;
}
.service-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 9px;
}
@media (max-width: 1100px) {
  .console {
    grid-template-columns: 205px minmax(0, 1fr);
  }
  .sidebar {
    padding: 30px 16px;
  }
  .control-main {
    padding: 32px 27px 65px;
  }
  .hours-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .two-cols {
    grid-template-columns: 1fr;
  }
  .stat {
    padding: 17px;
  }
  .stat strong {
    font-size: 28px;
  }
  .page-head {
    align-items: start;
  }
  .service-row {
    grid-template-columns: 1.4fr 0.7fr 1fr auto;
  }
}
@media (max-width: 760px) {
  .console {
    display: block;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 16px 16px 8px;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .sidebar > .brand {
    font-size: 23px;
  }
  .workspace-label,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 -6px;
  }
  .sidebar nav a {
    padding: 9px 12px;
    min-height: 44px; /* a thumb's target: the row was 38 px */
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 14px;
    gap: 6px;
  }
  /* A plain folded title («Состояние фоновых служб») is a thumb's target too; the numbered sections have their own */
  .control-main details:not(.form-section):not(.item) > summary {
    padding: 11px 0;
    min-height: 44px;
    box-sizing: border-box;
  }
  .sidebar nav a span {
    font-size: 14px;
  }
  .sidebar nav a:nth-child(n + 4) {
    display: none;
  }
  .control-main {
    padding: 24px 16px 56px;
  }
  .page-context {
    margin-bottom: 16px;
  }
  .control-main h1 {
    font-size: 30px;
  }
  .page-head {
    display: block;
  }
  .page-head .actions {
    margin-top: 17px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .stat strong {
    font-size: 26px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-section,
  .card,
  .panel {
    padding: 21px;
  }
  .form-section legend {
    font-size: 18px;
  }
  .stat {
    padding: 16px;
  }
  .hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-row {
    grid-template-columns: 1fr 1fr 40px;
    gap: 10px;
  }
  .service-row > label:first-of-type {
    grid-column: 1/-1;
  }
  .service-row > input[type="hidden"] {
    display: none;
  }
  .service-row .delete-row {
    grid-column: 3;
    grid-row: 2;
  }
  .save-bar {
    padding: 13px;
    gap: 10px;
    bottom: 7px;
  }
  .save-bar span {
    font-size: 12px;
  }
  .toolbar {
    padding: 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .toolbar input {
    max-width: none;
  }
  .table-panel {
    padding: 0;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .copy-field {
    flex-wrap: wrap;
  }
  .copy-field input {
    flex-basis: 100%;
  }
  .portal .control-main h1 {
    font-size: 30px;
  }
  .portal .control-main {
    padding: 24px 16px;
  }
  .login {
    margin: 40px auto;
  }
  .inline input {
    width: 100%;
    margin: 8px 0;
  }
  .control-main .btn {
    font-size: 14px;
  }
  .control-main .grid {
    grid-template-columns: 1fr;
  }
  .price-big {
    font-size: 36px;
  }
  .portal .card {
    padding: 23px;
  }
  .toast {
    bottom: 18px;
    left: 18px;
    right: 18px;
  }
  .table-wrap table {
    min-width: 590px;
  }
}
@media print {
  .sidebar,
  .save-bar,
  button,
  .actions,
  .page-context {
    display: none !important;
  }
  .console {
    display: block;
  }
  .control-main {
    padding: 0;
  }
  .card,
  .panel {
    border: 0;
    box-shadow: none;
  }
  body {
    background: white;
  }
}
.booking-header {
  margin: 28px 0;
}
.booking-header h1 {
  max-width: 700px;
}
.booking-chat {
  background: var(--sheet);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.chat-top {
  padding: 16px 24px;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-top .muted {
  margin-left: auto;
  font-weight: 400;
  font-size: 13px;
}
#chat {
  max-height: 450px;
  min-height: 160px;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  #chat {
    scroll-behavior: auto;
  }
}
.control-main .chat-message {
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--paper);
  padding: 14px 18px;
  border-radius: 8px 8px 8px 2px;
  max-width: 90%;
  margin: 0;
  color: var(--ink);
  align-self: flex-start;
  overflow-wrap: anywhere;
}
.control-main .chat-message.mine {
  align-self: flex-end;
  background: var(--forest);
  color: var(--on-forest);
  border-radius: 8px 8px 2px 8px;
}
.control-main .chat-message.typing {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.chat-message.typing .spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: chat-spin 0.8s linear infinite;
}
@keyframes chat-spin {
  to {
    transform: rotate(360deg);
  }
}
.chat-buttons {
  padding: 0 22px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#chat .chat-buttons.own {
  padding: 0;
}
.control-main .chat-buttons button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-size: 14px;
  padding: 10px 15px !important;
  text-align: left;
}
.control-main .chat-buttons button:hover {
  background: var(--shade) !important;
}
/* A link button (calendar, review) looks like the other buttons. */
.control-main .chat-buttons a {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 15px;
  text-decoration: none;
}
.control-main .chat-buttons a:hover {
  background: var(--shade);
}
.control-main .chat-buttons button:disabled,
.booking-chat #form button:disabled {
  opacity: 0.55;
  cursor: progress;
}
.booking-chat #form {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--hair);
  background: var(--sheet);
}
.booking-chat #form input {
  border: 0;
  background: none;
  padding: 9px 0;
}
.booking-chat #form button {
  font-size: 21px;
  min-width: 45px;
  background: var(--lime) !important;
  color: var(--ink) !important;
  padding: 6px 12px !important;
}
.booking-chat #status:empty {
  display: none;
}
.booking-chat #status {
  padding: 0 22px;
}
.demo-notice {
  font-size: 13px;
}
.demo-notice p {
  font-size: 13px;
  margin: 5px 0 8px;
}
.demo-notice a {
  font-size: 13px;
}
@media (max-width: 760px) {
  .portal .booking-header h1 {
    font-size: 29px;
  }
  #chat {
    padding: 17px;
    max-height: 430px;
  }
  .control-main .chat-message {
    font-size: 13px;
    max-width: 95%;
    padding: 13px 15px;
  }
  .chat-buttons {
    padding: 0 17px 18px;
  }
  .booking-chat #form {
    padding: 13px 17px;
  }
  .chat-top {
    padding: 16px 17px;
  }
  .demo-notice {
    margin-top: 20px;
  }
}
@media (max-width: 760px) {
  .sidebar nav a:nth-child(n + 4) {
    display: flex;
  }
  .sidebar-bottom {
    display: flex;
    margin-top: 0;
    gap: 22px;
    align-items: center;
  }
  .sidebar-bottom .pill {
    display: none;
  }
}
.demo-links {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
#links .demo-links {
  align-items: flex-start; /* the captions differ in height: the QR codes stand in one row */
}
.demo-links img {
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background: #fff;
}
pre.report-text {
  white-space: pre-wrap;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.service-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  margin: 10px 0;
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--sheet);
}
.service-card h3 {
  margin: 0 0 4px;
}
.service-card p {
  margin: 0;
}
/* A table wider than its box (the B2B company's team, mailboxes and checklist on its card, the month's organisations,
   the clients' list on a phone) scrolls sideways inside the box instead of widening the page; a shadow at the edge
   that hides columns says so, since a touch screen draws no scrollbar. */
.table-scroll,
.table-wrap {
  --table-bg: var(--sheet); /* the card's sheet; the page's paper where a table stands on the page itself */
  overflow-x: auto;
  max-width: 100%;
  background:
    linear-gradient(to right, var(--table-bg) 40%, transparent) 0 0 / 48px 100% no-repeat local,
    linear-gradient(to left, var(--table-bg) 40%, transparent) 100% 0 / 48px 100% no-repeat local,
    linear-gradient(to right, rgba(24, 35, 29, 0.14), rgba(24, 35, 29, 0)) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(24, 35, 29, 0.14), rgba(24, 35, 29, 0)) 100% 0 / 16px 100% no-repeat scroll;
}
.control-main > .table-scroll,
.control-main > form > .table-scroll {
  --table-bg: var(--paper);
}
.table-scroll table,
.table-wrap table {
  background: transparent;
}
table.log {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.log th,
table.log td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair);
}

.gift {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: var(--card-radius);
  background: var(--hi);
  color: var(--ink);
  font-weight: 600;
}
.my-visits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.my-visits li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.my-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.my-actions form.inline {
  display: inline;
}
.my-actions .danger {
  color: var(--error);
  border-color: var(--error-edge);
}
/* «Подтвердить» and «Позвонить ещё раз» side by side on «Мои записи»: apart, not touching */
.portal .card form.inline + form.inline {
  margin-left: 8px;
}
/* «Позвоните нам» on «Мои записи»: one big button on a phone, the same call as a QR code beside it on a computer */
.call-in .call-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin: 18px 0 8px;
}
.call-in .call-btn {
  min-width: 220px;
  font-size: 18px;
}
.call-in .call-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  margin: 0;
}
.call-in .call-qr-code svg {
  display: block;
  width: 116px;
  height: 116px;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
}
.call-in .call-qr figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.call-in .call-status {
  margin: 14px 0 12px;
  font-weight: 600;
}
.call-in .call-left {
  font-weight: 400;
  color: var(--muted);
}
.call-in .call-else {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
@media (hover: none) and (pointer: coarse) {
  .call-in .call-qr {
    display: none;
  }
  .call-in .call-btn {
    width: 100%;
  }
}
/* A computer: its tel: link opens an app picker, not a call — the QR code for the phone's camera leads, the link
   steps back to a quiet button */
@media (hover: hover) and (pointer: fine) {
  .call-in .call-qr {
    order: -1;
  }
  .call-in .call-qr-code svg {
    width: 148px;
    height: 148px;
  }
  .call-in .call-qr figcaption {
    font-size: 14px;
    color: var(--ink);
  }
  .call-in .call-btn {
    min-width: 0;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
    background: transparent;
    border-color: var(--line);
  }
  .call-in .call-btn:hover {
    background: var(--shade);
  }
}
/* The number and «Дальше →» side by side on a computer: apart, not touching (a phone puts the button under it) */
@media (min-width: 761px) {
  .portal .card form.my-phone input + .btn {
    margin-left: 8px;
  }
}
/* «Дальше →» and «Позвоним вам» side by side after five minutes without the call */
.portal .card form.my-phone .btn + .btn {
  margin-left: 8px;
}

/* v0.32: the settings form says what is filled — a saved secret shows as saved, a section counts its fields */
.form-section > legend .fill { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 10px; padding: 2px 8px; border-radius: var(--card-radius); vertical-align: middle; }
.form-section > legend .fill.ok { background: var(--ok-tint); color: var(--ok); }
.form-section > legend .fill.none { background: var(--shade); color: var(--muted); }
.form-grid .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-grid .field input { margin: 0; }
.form-grid .field.filled input, .control-main textarea.filled { border-left: 3px solid var(--forest); }
.control-main input::placeholder, .control-main textarea::placeholder { color: #747a73; font-size: 14px; }
.control-main .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 18px; }
.control-main .actions.checks form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-main .actions.checks span { font-size: 13px; color: var(--muted); }
/* «Настройки сервиса»: the headings of its parts over the numbered sections (app/control_service.py SERVICE_PARTS,
   09.11.2026), the size of «Проверки» under the form */
.control-main .service-part { margin: 30px 0 12px; font-size: 19px; }
.control-main .service-part:first-of-type { margin-top: 8px; }
/* The checks live apart from the settings, in their own block and colour */
.control-main .checks-block { margin: 26px 0 18px; padding: 22px 27px; border-radius: var(--card-radius); background: var(--band); border: 1px solid var(--card-edge); }
.control-main .checks-block h2 { margin: 0 0 4px; font-size: 19px; }
.control-main .checks-block .actions { margin: 12px 0 0; flex-direction: column; align-items: stretch; gap: 10px; }
.control-main .checks-block button.check:not(.btn) { background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 600; }
.control-main .checks-block button.check:not(.btn):hover { background: var(--shade); }
.cert { max-width: 520px; }
.cert-sum { font-family: var(--mono); font-size: 34px; font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; }
.cert-code { font-family: var(--mono); font-size: 26px; letter-spacing: .08em; padding: 12px 16px; border: 2px dashed var(--forest); border-radius: var(--card-radius); display: inline-block; margin: 6px 0 14px; user-select: all; }
.api-key { display: inline-block; font-family: var(--mono); font-size: 14px; padding: 8px 12px; border: 1px solid var(--card-edge); border-radius: var(--control-radius); background: var(--sheet); word-break: break-all; user-select: all; }
form.inline { display: inline; }
/* «Переезд» on a company's card: the desk's wizard in the console (app/import_page.py) */
.desk-import .import-kinds, .desk-import .import-mode { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.desk-import .check { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.desk-import .import-file { display: block; font-weight: 600; margin-top: 10px; }
.desk-import .import-file input { display: block; margin-top: 6px; }
.desk-import .import-what { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.desk-import table.import-map select { width: 100%; min-width: 12rem; }
.desk-import table.import-map td:nth-child(2) { max-width: 22rem; overflow-wrap: anywhere; color: var(--muted); }
.desk-import .import-sum { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.desk-import .import-actions, .desk-import .import-done .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.desk-import .muted { color: var(--muted); }
.desk-import .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desk-import textarea { width: 100%; }
@media (max-width: 640px) { .desk-import table.import-map, .desk-import table.import-map tbody, .desk-import table.import-map tr, .desk-import table.import-map td { display: block; width: 100%; max-width: none; } .desk-import table.import-map tr:first-child { display: none; } .desk-import table.import-map tr { padding: 10px 0; border-bottom: 1px solid #edf1e8; } .desk-import table.import-map td { padding: 2px 0; border: 0; } .desk-import table.import-map select { min-width: 0; } }

.picture-editor{grid-column:1/-1;min-width:0}
.picture-editor [data-picture-preview]:not([hidden]){display:block;width:min(240px,100%);height:160px;object-fit:cover;border-radius:10px;margin:0 0 12px}
.picture-editor input[type=file]{max-width:100%}
/* «Фото на главной» (app/control_service.py): previewed in the landing's own circle. */
.picture-editor.person-photo [data-picture-preview]:not([hidden]){width:88px;height:88px;border-radius:50%;object-position:50% 30%}
.picture-editor.person-photo [data-picture-status]{display:block;margin-top:6px;color:var(--muted)}
/* «Фото на странице» (app/media.py gallery_field, pictures.js): the page's photos in their order, a 4:3 tile each with
   «←» «→» and «×» (Удалить фото N) under it, one height in a row (44 px on a phone); «Добавить фото» uploads several at once. */
.gallery-editor { grid-column: 1 / -1; min-width: 0; margin: 8px 0 16px; }
.gallery-editor .gallery-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 8px; }
.gallery-editor .gallery-head span { color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery-editor .gallery-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.gallery-editor .gallery-items:empty { display: none; }
.gallery-editor .gallery-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; }
.gallery-editor .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--shade); }
.gallery-editor .gallery-tools { display: flex; gap: 6px; }
.gallery-editor .gallery-tools button { box-sizing: border-box; flex: 0 0 40px; width: 40px; min-width: 0; min-height: 40px; height: 40px; margin: 0; padding: 0; font-size: 16px; line-height: 1; }
.gallery-editor .gallery-tools button[data-gallery-delete] { margin-left: auto; font-size: 22px; }
.gallery-editor .gallery-tools button:disabled { opacity: .4; cursor: default; }
.gallery-editor .gallery-add { cursor: pointer; }
.gallery-editor .gallery-add.is-full { opacity: .5; pointer-events: none; }
.gallery-editor .gallery-add:focus-within { outline: 2px solid var(--forest, #172e25); outline-offset: 2px; }
.gallery-editor [data-picture-status] { display: block; margin-top: 8px; color: var(--muted); }
@media (max-width: 760px), (pointer: coarse) {
  .gallery-editor .gallery-tools button { flex-basis: 44px; width: 44px; min-height: 44px; height: 44px; }
}
/* A service's photos and a specialist's works (the owner, 06.10.2026): under each its «Подпись», «До» or «После» of a
   pair, and the tick that makes it a «до» (pictures.js shows it where it can stand). */
.gallery-editor .gallery-words { box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 8px 10px; font-size: 14px; }
.gallery-editor .gallery-role:empty { display: none; }
.gallery-editor .gallery-role { font-size: 13px; font-weight: 600; color: var(--ink); }
.gallery-editor .gallery-pair { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.35; }
.gallery-editor .gallery-pair[hidden] { display: none; }
.service-row .gallery-editor { margin: 4px 0 0; }
.service-row .gallery-editor .gallery-add { font-size: 14px; font-weight: 650; } /* not the row's small field labels */
@media (max-width: 760px), (pointer: coarse) {
  .gallery-editor .gallery-words { min-height: 44px; font-size: 16px; }
}
/* «Источники» (app/control_sources.py): the funnel by source, the sources' cards with their QR code, an agent's weeks */
table.sources-funnel th { white-space: normal; vertical-align: bottom; padding: 10px 6px; }
table.sources-funnel td { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 8px 6px; }
table.sources-funnel td:first-child { white-space: normal; min-width: 10.5em; }
table.sources-funnel td.wide { white-space: normal; min-width: 8em; }
table.sources-funnel td small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
table.sources-funnel td .payback { margin-top: 6px; white-space: normal; }
table.sources-funnel tr.total td { font-weight: 600; border-top: 1px solid var(--ink); }
table.sources-funnel form.payout { display: flex; gap: 8px; align-items: center; }
table.sources-funnel form.payout input { width: 7em; min-height: 36px; margin: 0; }
.source-card .copy-field { flex-wrap: wrap; }
.source-card .copy-field input { flex-basis: 100%; }
/* On a phone a row of such a table is a card: the first cell its title, every other one «name — value». */
@media (max-width: 760px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot { display: block; }
  table.stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  table.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border: 0; padding: 3px 0;
    white-space: normal; min-width: 0; }
  table.stack td:first-child, table.stack td.wide { grid-column: 1 / -1; }
  table.stack td:first-child { display: block; padding-bottom: 6px; }
  table.stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 400; }
  table.stack tr.total td { border-top: 0; }
  table.stack tr.total { border-top: 1px solid var(--ink); }
  .table-scroll.stacked { overflow: visible; background: none; }
  table.sources-funnel form.payout { flex-wrap: wrap; justify-content: flex-end; }
}
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 17px; }
.source-card { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 21px; }
.source-card h3 { margin: 0; font-size: 18px; }
.source-card .row { align-items: flex-start; flex-wrap: nowrap; }
.source-card p { margin: 0; }
.source-card .actions { margin: 0; }
.source-qr svg { display: block; width: 132px; height: 132px; }
.panel .agent + .agent { margin-top: 23px; }
.panel .agent h3 { margin: 0 0 8px; font-size: 17px; }
/* «Первая волна»: the terms and the totals over the months, the companies under them */
.panel .wave p { margin: 0 0 8px; }
.panel .wave h4 { margin: 18px 0 6px; font-size: 15px; }
.stand-counts h3 { margin: 22px 0 8px; font-size: 17px; } /* «Источники»: the demos' stand under the site's buttons */
.qr-print { text-align: center; max-width: 520px; margin: 0 auto; }
.qr-print svg { display: block; width: min(100%, 360px); height: auto; margin: 12px auto; }
.qr-print .qr-link { font-family: var(--mono); font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.qr-print .actions { justify-content: center; }
@media print { .qr-print .qr-name, .qr-print .hint { display: none; } .qr-print svg { width: 9cm; height: 9cm; } }
/* «Добавить все мои записи в календарь» on «Мои записи» and the calendar's own page (app/calendar_feeds.py) */
.calendar-sub { margin-top: 12px; }
.calendar-sub > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.control-main details.calendar-renew { border: 0; border-radius: 0; background: none; padding: 0; margin: 8px 0 0; }
.calendar-renew > summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; }
.calendar-note, .calendar-renew form p { margin: 8px 0; font-size: 14px; }
.calendar-url { overflow-wrap: anywhere; word-break: break-all; }
.calendar-ways.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* «Рекомендации после визита» on the visit's page /c/<token> and under a visit in «Мои записи» (app/after_care_web.py):
   each item a row; a product's line with its price, its «Отложить к следующему визиту» a finger's height */
.care-items { list-style: none; margin: 0; padding: 0; }
.care-items li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.care-items li:last-child { border-bottom: 0; }
.care-product { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 8px; }
.care-product .btn { min-height: 44px; }
.care-held { font-weight: 600; color: var(--ok); }
.care-price { font-family: var(--mono); font-size: 0.92em; white-space: nowrap; }
.care-my { margin-top: 8px; }
.care-my > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.care-my .care-items li { padding: 6px 0; border-bottom: 0; }
/* «Разделы и свои блоки» (app/site_blocks_form.py, forms.js): the website's sections and own blocks in the page's order,
   a row each — its name and fact, «Показывать», «↑ Выше» «↓ Ниже» of a finger's 44 px —, a block's fields folded under
   its row; on a phone the name takes its line, the controls the next. */
.layout-editor { grid-column: 1 / -1; min-width: 0; margin: 24px 0 16px; }
.layout-editor h3 { margin: 0 0 8px; font-size: 18px; }
.layout-list { display: grid; gap: 8px; margin: 12px 0 8px; }
.layout-row { min-width: 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--control-radius); background: var(--sheet); }
.layout-block { border-color: var(--forest); }
.layout-row.row-item { display: block; margin: 0; } /* a block's row: forms.js removes it whole (.row-item), brand.css's row of fields it is not */
.layout-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.layout-name { flex: 1 1 16em; min-width: 0; display: flex; flex-direction: column; margin: 0; overflow-wrap: anywhere; }
.layout-name small { font-size: 13px; color: var(--muted); }
.layout-show { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-weight: 500; cursor: pointer; }
.layout-show input { width: 20px; height: 20px; margin: 0 8px 0 0; accent-color: var(--forest); }
.layout-moves { display: flex; gap: 6px; }
.layout-moves button { min-height: 44px; min-width: 44px; margin: 0; padding: 0 12px; white-space: nowrap; }
.layout-moves button:disabled { opacity: .4; cursor: default; }
.control-main details.layout-edit { margin: 4px 0 0; padding: 0; border: 0; background: none; }
.layout-edit > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.layout-fields { display: grid; gap: 4px; padding: 4px 0 8px; }
.layout-fields .remove-item { justify-self: start; }
.layout-status:empty { display: none; }
.layout-status { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.layout-adds-title { margin: 12px 0 8px; font-weight: 600; }
.layout-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.layout-adds button { min-height: 44px; margin: 0; }
/* «Предложить описание» in «02 Услуги» (app/service_drafts.py): the button under a service's description, beside it
   the line of what came of it; above the list the hint and the button for every empty one. A finger's 44 px. */
.describe-all { display: grid; justify-items: start; gap: 8px; margin: 0 0 18px; }
.describe-all .hint { margin: 0; }
.describe-all [hidden], .describe-tools [hidden] { display: none; }
.service-row .describe-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
/* On a computer «×» stands at the end of the button's line, in the column of «Мест в группе»: the row's last column
   (brand.css) stays empty and narrow, so the fields keep their width at 768 px. */
@media (min-width: 761px) {
  .service-row .describe-tools { grid-column: 1 / -3; }
  .service-row .describe-tools ~ .delete-row { grid-column: -3 / -2; justify-self: end; }
}
.describe-tools .btn, .describe-all .btn { min-height: var(--control-h, 44px); margin: 0; }
.describe-tools .btn[aria-disabled="true"], .describe-all .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.describe-note, .describe-status { margin: 0; font-size: 14px; color: var(--muted); }
.describe-note.err, .describe-status { color: var(--error); }
@media (max-width: 760px) {
  .describe-tools .btn, .describe-all .btn { width: 100%; }
}
/* «Без мастера в конце услуги» — a rarer field of the service's row on its own line, so the row keeps its columns */
.service-row .service-processing { grid-column: 1 / -1; }
.service-row .service-processing input { max-width: 8em; }

/* Operator workspace. Keep these rules under .console: booking and support portals share this stylesheet. */
.console {
  --paper: #f4f7f8;
  --sheet: #fff;
  --card-edge: #dce5e5;
  --card-radius: 16px;
  --card-shadow: 0 2px 8px #15372c04;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
}
.console .console-skip {
  display: block;
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 12px;
  padding: 12px 18px;
  background: #fff;
  color: #15372c;
  border-radius: 8px;
  transform: translateY(-160%);
}
.console .console-skip:focus { transform: none; }
.console .sidebar {
  padding: 24px 16px 18px;
  gap: 30px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #527364 transparent;
}
.console .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.console .sidebar-head .brand { white-space: nowrap; font-size: 24px; }
.console .console-navigation { display: flex; flex-direction: column; gap: 32px; flex: 1; min-height: 0; }
.console .sidebar nav { gap: 24px; }
.console .nav-group { display: grid; gap: 4px; }
/* The groups' names (app/control_ui.py menu, 09.11.2026): a quiet sentence, never tracked capitals */
.console .nav-group-title {
  color: #b3c9be;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 12px 4px;
}
.console .sidebar nav a { min-height: 44px; border: 1px solid transparent; border-radius: 9px; }
/* A computer's mouse: the five groups' lines a little closer; a finger keeps 44 px */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .console .sidebar nav { gap: 18px; }
  .console .nav-group { gap: 2px; }
  .console .sidebar nav a { min-height: 38px; padding-block: 8px; }
}
.console .sidebar nav a span { font-size: 14px; }
.console .sidebar nav a.active { border-color: #b1eb77; font-weight: 600; }
.console .sidebar nav a.active::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; }
.console .sidebar-bottom { margin-top: auto; gap: 8px; padding-left: 12px; }
/* A window lower than the column of 38 px lines (about 1 000 px: a laptop's 1440×900, 1366×768, 1280×720): closer
   still, so the five groups, the session's line and «Открыть сайт ↗» stand whole without scrolling the column; a line
   keeps 30 px, more than a pointer's 24 (tests/browser/71-console-menu.cjs) */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (max-height: 1050px) {
  .console .sidebar { padding-block: 16px 12px; gap: 12px; }
  .console .console-navigation { gap: 16px; }
  .console .sidebar nav { gap: 10px; }
  .console .nav-group { gap: 0; }
  .console .nav-group-title { padding-bottom: 2px; line-height: 1.25; }
  .console .sidebar nav a { min-height: 28px; padding-block: 3px; }
  .console .sidebar-bottom { gap: 4px; }
}
/* The lowest of them (1280×720): «Руководства» (v0.167.43) in «Помощь» made the column a line longer than the window —
   the groups and the session's line come closer, every line keeps its 28 px */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (max-height: 760px) {
  .console .console-navigation { gap: 8px; }
  .console .sidebar nav { gap: 6px; }
}
.console .control-main {
  max-width: 2100px;
  padding: 0 clamp(24px, 3vw, 48px) 64px;
}
.console .control-main:focus { outline: none; }
.console-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--card-edge);
}
.console-breadcrumb { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.console .console-breadcrumb > span:last-child { overflow-wrap: anywhere; }
.console .console-topbar-actions { display: flex; align-items: center; flex-shrink: 0; gap: 18px; }
.console .console-topbar-actions form { margin: 0; }
.console .console-topbar-actions .logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #9bb1a7;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
}
.console .console-topbar-actions .logout:hover { background: #edf3f0; border-color: #77988a; }
.console-breadcrumb a { text-decoration: none; }
.console-breadcrumb > span:last-child { color: var(--ink); font-weight: 600; }
.console-help { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-size: 13px; }
.console .control-main h1 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -.025em; }
.console .page-head { margin-bottom: 24px; align-items: flex-start; }
.console .page-head .actions { margin-top: 0; justify-content: flex-end; }
.console .control-main p:not(.notice) { max-width: 92ch; }
.console .control-main .hint { color: #536963; }
.console :is(.card, .panel, .form-section) { box-shadow: var(--card-shadow); }
.console .stats { margin-bottom: 24px; }
.console .stat { padding: 20px 24px; }
.console .stat strong { font-size: 34px; color: var(--forest); }
.console .toolbar { padding-bottom: 18px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; }
.console .toolbar input { max-width: 440px; background: var(--paper); }
.console .table-wrap th { font-size: 12px; font-weight: 600; color: var(--muted); background: #f7f9f9; }
.console .table-wrap tbody tr:hover { background: #f4f8f5; }
.console .table-wrap td { padding-top: 18px; padding-bottom: 18px; }
.console .table-wrap td .btn { margin-top: 4px; margin-bottom: 4px; }
.console .control-main :is(input, select, textarea) { border-color: #b7c9c3; border-radius: 9px; }
.console .control-main :is(input, select, textarea):focus-visible { border-color: #526f61; outline: 3px solid #d2e4da; outline-offset: 1px; }
.console .control-main :is(button, a):focus-visible { outline-offset: 3px; }
.console .control-main > form[data-client-form] { max-width: 1480px; }
.console .control-main details.form-section { padding: 0; margin: 0 0 14px; border: 1px solid var(--card-edge); border-radius: 14px; }
.console .form-section > summary { gap: 8px 12px; padding: 20px 24px; line-height: 1.45; }
.console .form-section > summary .num { margin: 0; }
.console .form-section[open] > summary { margin-bottom: 20px; border-bottom: 1px solid var(--card-edge); }
.console .control-main details.form-section[open] { padding-bottom: 24px; }
.console .form-grid { gap: 22px 28px; }
.console .form-grid .hint { margin-top: 2px; }
.console .console-line-access { background: #edf0fa; border-color: #cfd7ed; margin-bottom: 20px; }
.console .console-line-access > summary { font-weight: 600; padding: 4px 0; }
.console .console-line-access .panel { margin: 16px 0 0; }
.console #st-balances { margin-top: 24px; }
.console .settings-jumps { border-radius: 14px; }

@media (min-width: 1200px) {
  .console #st-balances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .console #st-balances > :is(h2, p) { grid-column: 1/-1; margin: 0; }
  .console #st-balances > .service-card { margin: 0; align-items: flex-start; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .console { grid-template-columns: 230px minmax(0, 1fr); }
  .console .sidebar { padding-left: 12px; padding-right: 12px; }
  .console .sidebar-head .brand { font-size: 22px; }
}
@media (max-width: 900px) {
  .console { display: block; }
  .console .sidebar { position: static; height: auto; padding: 16px 20px; gap: 0; overflow: visible; }
  .console .sidebar-head .brand { font-size: 23px; }
  .console[data-nav-ready] .console-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #5e7c6e;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
  }
  .console-menu-icon { width: 14px; height: 10px; border-block: 1px solid currentColor; position: relative; }
  .console-menu-icon::after { content: ""; position: absolute; top: 4px; left: 0; width: 14px; border-top: 1px solid currentColor; }
  .console[data-nav-ready]:not(.console-menu-open) .console-navigation { display: none; }
  .console .console-navigation { padding-top: 24px; gap: 24px; }
  .console .sidebar nav { display: grid; gap: 22px; overflow: visible; margin: 0; }
  .console .nav-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console .nav-group-title { grid-column: 1/-1; }
  .console .sidebar nav a { display: flex; padding: 10px 12px; border-color: #365748; white-space: normal; }
  .console .sidebar nav a span { font-size: 14px; }
  .console .sidebar-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-left: 12px; }
  .console .sidebar-bottom .pill { display: flex; width: 100%; }
  .console .control-main { padding: 0 20px 48px; }
  .console-topbar { min-height: 64px; margin-bottom: 22px; gap: 12px; }
  .console-breadcrumb { font-size: 12px; gap: 6px; }
  .console-help { font-size: 12px; gap: 6px; flex-shrink: 0; }
  .console .console-topbar-actions .console-help { display: none; }
  .console .page-head { display: block; }
  .console .page-head .actions { margin-top: 18px; justify-content: flex-start; }
  .console .form-section > summary .fill { margin-left: 0; }
  .console .form-section > summary { padding: 18px; }
  .console .control-main :is(input, select, textarea) { font-size: 16px; }
}
@media (max-width: 380px) {
  .console .sidebar { padding-inline: 14px; }
  .console .sidebar-head .brand { font-size: 21px; }
  .console .control-main { padding-inline: 14px; }
  .console .console-menu-toggle { gap: 8px; padding-inline: 9px; }
}
@media print {
  .console { display: block; }
  .console .sidebar, .console .console-topbar, .console .console-skip { display: none; }
  .console .control-main { max-width: none; padding: 0; }
}

/* «Подключения» (app/control_connections.py, 09.11.2026): a sheet a part, a row a connection — its name and one fact,
   the state as a word with a dot of its tone, the way to its place; the companies, the bases and the B2B supports as
   tables of their cards; the Meta marking stays open (13 px). One sheet with hairlines, never a grid of cards. */
.console .connections-jumps { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0 0 18px; font-size: 14px; }
.console .connections-jumps a { display: inline-flex; align-items: center; min-height: 36px; }
.console .connections-sheet {
  margin: 0 0 18px;
  padding: 20px 24px 10px;
  background: var(--sheet);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.console .connections-sheet > h2 { margin: 0 0 6px; font-size: 19px; }
.console .connections-sheet > .hint { margin: 0 0 10px; }
.console .connections-sheet .connection-mark { margin: 2px 0 8px; font-size: 13px; color: var(--muted); }
.console .connections-list { list-style: none; margin: 0; padding: 0; }
.console .connection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 280px) minmax(90px, auto);
  align-items: center;
  gap: 4px 18px;
  min-height: 52px;
  padding: 10px 0;
  border-top: 1px solid var(--hair);
}
.console .connection:first-child { border-top: 0; }
.console .connection.wide { grid-template-columns: minmax(0, 1fr); }
.console .connection-main h3 { margin: 0; font-size: 15px; font-weight: 600; }
.console .connection-main p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.console .connection-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.console .connection-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.console .connection-state.ok .connection-dot { background: var(--ok); }
.console .connection-state.warn .connection-dot { background: var(--warn); }
.console .connection-state.off { color: var(--muted); }
.console .connection-go {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 14px;
  white-space: nowrap;
}
.console .connection-vars { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.console .connection-vars li { margin: 2px 0; overflow-wrap: anywhere; }
.console .connection-vars code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.console .connection-warn { color: var(--warn); }
.console .connections-table td small { display: block; color: var(--muted); font-size: 12px; }
.console .connections-table td .connections-desk { display: block; margin-top: 4px; font-size: 13px; }
@media (max-width: 760px), (pointer: coarse) {
  /* A phone: the name and its fact on the whole width, the state and the way to its place under them on one line */
  .console .connections-sheet { padding: 16px 18px 8px; }
  .console .connection { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .console .connection-main { grid-column: 1 / -1; }
  .console .connection-go { grid-column: 2; min-height: 44px; }
  .console .connections-jumps a { min-height: 44px; }
}

/* «Запуск» of the clients table on a phone: in the first cell, the column being off the screen's edge */
.launch-inline { display: none; }
@media (max-width: 600px) {
  .launch-inline { display: block; margin-top: 4px; }
  .launch-inline a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* «Цена зависит от размера» in a service row and the company's «Шкалы размеров», «Дополнительно к услугам»
   (app/service_sizes_form.py): closed by default, a quiet box under the row; a level is one row on a wide screen
   (name · price · minutes · «Без мастера» · «Не делаем») and two on a phone (the name with «Не делаем», then the three
   numbers); the summary's second line names the scale and what it gives («Класс машины: от 8 000 ₽ · 3–5 ч»). The
   `html` prefix: the cabinet's shell and the console style a bare details otherwise (as brand.css's details.item). */
.service-row .sizes-fold { grid-column: 1 / -1; }
html details.sizes-fold,
html details.sizes-company { border: 1px solid var(--rule); border-radius: var(--card-radius); background: var(--sheet); padding: 0; margin: 0; }
html details.sizes-company { margin: 14px 0 0; }
html details.sizes-fold > summary,
html details.sizes-company > summary,
html details.form-section details.sizes-fold > summary,
html details.form-section details.sizes-company > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: 44px; box-sizing: border-box; padding: 10px 16px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
html details.sizes-fold > summary::-webkit-details-marker,
html details.sizes-company > summary::-webkit-details-marker { display: none; }
html details.sizes-fold > summary::after,
html details.sizes-company > summary::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
html details.sizes-fold[open] > summary::after,
html details.sizes-company[open] > summary::after { transform: rotate(-90deg); }
html details.sizes-fold > summary small,
html details.sizes-company > summary small { grid-column: 1; font-size: 13px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
html details.sizes-fold > :not(summary),
html details.sizes-company > :not(summary),
html details.form-section details:is(.sizes-fold, .sizes-company) > :is(p, label, div, details, button) { margin-left: 16px; margin-right: 16px; }
html details.sizes-fold[open],
html details.sizes-company[open],
html details.form-section details:is(.sizes-fold, .sizes-company)[open] { padding-bottom: 14px; }
.service-row .sizes-fold label { font-size: 12px; }
.sizes-scale { display: block; max-width: 340px; }
.sizes-rows { max-width: 1100px; }
.sizes-row { display: grid; grid-template-columns: minmax(150px, 2fr) repeat(3, minmax(88px, 1fr)) auto; grid-template-areas: "name price min proc off"; gap: 8px 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--hair); }
.sizes-name { grid-area: name; margin: 0; align-self: center; min-width: 0; }
.sizes-name b { display: block; font-size: 14px; }
.sizes-name small { display: block; font-size: 12px; color: var(--muted); }
.sizes-price { grid-area: price; }
.sizes-min { grid-area: min; }
.sizes-proc { grid-area: proc; }
html .sizes-row .sizes-off { grid-area: off; align-self: center; white-space: nowrap; margin: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.sizes-level { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(150px, 1.4fr) minmax(96px, 0.7fr) minmax(180px, 1.6fr); gap: 8px 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--hair); }
.sizes-mode { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 2px; }
.sizes-unit { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 8px 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--hair); }
.sizes-unit .hint { grid-column: 1 / -1; margin: 0; }
.sizes-models textarea { min-height: 44px; }
.addon-fields { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(80px, 1fr)); gap: 8px 12px; align-items: end; }
.addon-services { border: 0; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.addon-services legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.addon-services .addon-group { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
html .addon-services .check { min-height: 40px; margin: 0; display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .sizes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name off" "price min proc"; }
  .sizes-level,
  .sizes-unit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sizes-level > label:first-of-type,
  .sizes-level > label:has(+ .sizes-models),
  .sizes-models { grid-column: 1 / -1; }
  .addon-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .addon-fields > label:first-child { grid-column: 1 / -1; }
  html details.sizes-fold > :not(summary),
  html details.sizes-company > :not(summary),
  html details.form-section details:is(.sizes-fold, .sizes-company) > :is(p, label, div, details, button) { margin-left: 12px; margin-right: 12px; }
  html details.sizes-fold > summary,
  html details.sizes-company > summary { padding: 11px 12px; }
}
/* A phone of 320–480 px: a level is the name, then price and minutes, then «Без мастера» and «Не делаем» — two
   columns wide enough for «10 500» and «Не делаем»; a field's label wraps between words, never inside one. */
@media (max-width: 480px) {
  .sizes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "name name" "price min" "proc off"; }
  .addon-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(.sizes-row, .sizes-level, .sizes-unit, .addon-fields) label { overflow-wrap: normal; word-break: normal; }
/* A sized service's flat «Минут» and «Цена для клиента»: read-only, they show what the sizes give. */
html .service-row input:read-only:is([name^="service_price_"], [name^="service_duration_"], [name^="service_processing_"]) { background: var(--hair); color: var(--muted); }
/* «Где оказывается» inside a service row's «Ещё: размер и выезд» (app/visit_settings_form.py): «У нас» / «У клиента»,
   «Сколько человек едет», «Можно сделать регулярной» on one line on a wide screen, stacked on a phone; the warning of
   a crew larger than the people who do the service stands under them. */
.service-row .sizes-fold fieldset.visit-where { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; margin: 4px 16px 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.service-row .sizes-fold fieldset.visit-where legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); }
.service-row .sizes-fold .visit-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 14px; }
.service-row .sizes-fold .visit-choice input { width: 18px; height: 18px; margin: 0; }
.service-row .sizes-fold .visit-crew { display: grid; gap: 4px; max-width: 180px; margin: 0; }
.service-row .sizes-fold .visit-crew input { width: 100%; }
.service-row .sizes-fold .visit-warn { flex: 1 1 100%; margin: 0; color: var(--warn-ink, #8a4b00); }
details.visit-company .visit-reach { max-width: 70ch; }
/* «Выезды к клиентам»: a form's measure, the numbers short (the base's words are the one long field). */
html details.visit-company > label { display: block; max-width: 560px; margin-top: 12px; }
html details.visit-company > label input[type="number"] { display: block; max-width: 180px; }
html details.visit-company > label.visit-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; }
html details.visit-company > label.visit-choice input { width: 18px; height: 18px; margin: 0; }