.rg-section { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.rg-caption {
  margin: 0;
  padding: 0 var(--sp-200);
  font-family: var(--font);
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semi);
  color: var(--ink2);
}
.rg-foot {
  padding: 0 var(--sp-200);
  font-size: var(--fs-s); line-height: var(--lh-s);
  color: var(--ink3);
}
.rg-foot:has(> :only-child:empty) { display: none; }
.rg-group {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 0 0 var(--bw) var(--rg-ring, transparent);
  overflow: clip;
}
:root[data-theme="light"] .rg-group,
:root:not([data-theme]) .rg-group { --rg-ring: var(--a-100); }

.rg-row {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-150);
  width: 100%;
  min-height: calc(var(--h-field) + var(--sp-100));
  margin: 0;
  padding: var(--sp-100) var(--sp-200);
  border: 0; border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit; font-size: var(--fs); line-height: var(--lh);
  font-weight: var(--fw-reg);
  text-align: left;
}
@media (max-width: 700px) { .rg-row { padding-block: var(--sp-075); } }
@media (max-width: 700px) {
  .rg-row:not(.rg-field):not(.rg-stack) { flex-wrap: wrap; row-gap: var(--sp-050); }
  .rg-row:not(.rg-field):not(.rg-stack) > .rg-main { flex-basis: 0; min-width: min(8em, 100%); }
  .rg-row > .rg-end { max-width: 100%; flex-wrap: wrap; }
  /* 15.890 («почему смещено так»): a palette moved under its label starts at the row's left edge — a short one kept
     to the right stood apart from the long one that filled the width */
  .rg-row > .rg-end:has(> .swatches) { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
}
.rg-row + .rg-row::before {
  content: "";
  position: absolute; top: 0; right: 0; left: var(--sp-200);
  height: var(--bw);
  background: var(--line);
}
.rg-row.rg-indent + .rg-row::before,
.rg-row + .rg-row.rg-indent::before {
  left: calc(var(--sp-200) + var(--sp-400) + var(--sp-150));
}
.rg-row[hidden], .rg-section[hidden] { display: none; }
button.rg-row, label.rg-row { cursor: pointer; }
button.rg-row:hover:not(:disabled), label.rg-row.rg-field:not(:has(:disabled)):hover { background: var(--a-100); }
label.rg-row.rg-field:has(:disabled) { cursor: default; }
button.rg-row:disabled { color: var(--ink-dis); cursor: default; }
.rg-row.rg-sel { background: var(--acc-weak); }

.rg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rg-title { overflow-wrap: anywhere; }
.rg-sub { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.rg-end {
  flex: 0 0 auto; min-width: 0; max-width: 60%;
  margin-left: auto;
  display: flex; align-items: center; justify-content: safe flex-end; gap: var(--sp-100);
}
.rg-val {
  min-width: 0;
  color: var(--ink2);
  text-align: right;
  overflow-wrap: break-word;
}
.rg-end > :is(.chip, .rg-chev, .num) { flex: none; white-space: nowrap; }
.rg-chev { flex: none; display: inline-flex; color: var(--ink3); }

.rg-row.rg-field > .rg-main { flex: 0 1 auto; }
.rg-row.rg-field > :is(.numfield, .field-icon) { margin-left: auto; }
/* a number is never cut by a long label: the label wraps (15.832) */
.rg-row.rg-field > .numfield { flex: none; }
:root .rg-group .rg-row > :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input)) {
  flex: 1 1 120px; min-width: 0;
  height: auto;
  margin: 0; padding: var(--sp-075) 0;
  border: 0; border-radius: var(--r-s);
  background: none; box-shadow: none;
  color: var(--ink);
  font: inherit;
  text-align: right;
  outline: none;
}
:root .rg-group .rg-row.rg-field > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input):hover:not(:disabled):not([readonly]):not(:focus):not(.invalid),
:root .rg-group .rg-row.rg-field .numfield:not(.with-steps) > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input):hover:not(:disabled):not([readonly]):not(:focus):not(.invalid),
:root .rg-group .rg-row.rg-field .field-icon > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input):hover:not(:disabled):not([readonly]):not(:focus):not(.invalid),
:root .rg-group .rg-row.rg-stack > textarea:hover:not(:disabled):not([readonly]):not(:focus):not(.invalid) {
  box-shadow: none;
}
.rg-row > input::placeholder, .rg-row > textarea::placeholder { color: var(--ink3); }
/* The active line marks the row whose text is being typed — not a row of photos or of buttons pressed (15.609) */
.rg-row.rg-field:has(:is(input, textarea, [contenteditable]):focus),
.rg-row.rg-stack:has(:is(input, textarea, [contenteditable]):focus) {
  background: var(--a-100);
}
/* the line — a straight stripe of its own at the row's left, round caps: never bent by a group's rounded corner (15.1044) */
.rg-row.rg-field:has(:is(input, textarea, [contenteditable]):focus)::after,
.rg-row.rg-stack:has(:is(input, textarea, [contenteditable]):focus)::after {
  content: "";
  position: absolute; left: var(--sp-050); top: var(--sp-100); bottom: var(--sp-100);
  width: var(--bw-sel); border-radius: var(--r-full);
  background: var(--acc);
}
/* …and red while it holds what is not taken (15.831) */
.rg-row.rg-field:has(:is(input, textarea).invalid:focus)::after,
.rg-row.rg-stack:has(:is(input, textarea).invalid:focus)::after { background: var(--danger); }
/* A slider in a row (rowRange, 15.612): it takes the room the label leaves, at most a comfortable length */
.rg-row.rg-range > .rg-end { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.rg-row.rg-range .range { width: min(240px, 100%); }
.rg-row.rg-stack { flex-direction: column; align-items: stretch; gap: var(--sp-050); padding-block: var(--sp-150); }
:root .rg-group .rg-row.rg-stack > textarea {
  width: 100%;
  min-height: var(--h-field);
  margin: 0; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: none; box-shadow: none;
  color: var(--ink);
  font: inherit;
  resize: none;
  field-sizing: content;
  outline: none;
}

.rg-row.rg-action { color: var(--acc-ink); font-weight: var(--fw-med); }
.rg-row.rg-action.rg-danger { color: var(--danger-ink); }
.rg-plus {
  flex: none;
  display: grid; place-items: center;
  width: var(--sp-400); height: var(--sp-400);
  border-radius: var(--r-full);
  background: var(--acc-weak);
}

.rg-avatar {
  flex: none;
  display: block;
  width: var(--sp-400); height: var(--sp-400);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--avatar-fill, var(--a-200));
  color: var(--avatar-ink, var(--ink2));
  font-size: var(--fs-s); font-weight: var(--fw-semi);
}
.rg-avatar.rg-sq { border-radius: var(--r-s); }
/* 15.1069: a circle's letters — a drawing over the whole circle, its text set by the cap height in the middle
   (`initials()`); the messenger's circles take the same */
/* square by its width: in a grid circle (the messenger's) a height of 100 % had no height to take and the drawing
   grew to 150, the letters below the circle */
.avatar-letters { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; fill: currentColor; }
.rg-avatar.rg-big { width: calc(var(--sp-600) + var(--sp-200)); height: calc(var(--sp-600) + var(--sp-200)); font-size: var(--fs-h); }
.rg-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-avatar.rg-fit { padding: var(--sp-075); background: var(--sheet-bg, var(--card)); }
.rg-avatar.rg-fit > img { object-fit: contain; }
.rg-avatar.rg-wide { width: calc(var(--sp-400) * 2); }
.rg-avatar.rg-wide.rg-big { width: calc((var(--sp-600) + var(--sp-200)) * 2); }
.rg-foot:has(> span:only-child:empty) { display: none; }

.chip.rg-lock { display: inline-flex; align-items: center; gap: var(--sp-075); }
@container (max-width: 15em) {
  .chip.rg-lock > .rg-lock-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

.rg-hero { display: flex; align-items: center; gap: var(--sp-200); padding: var(--sp-100) var(--sp-200) 0; }
.rg-hero-text { display: flex; flex-direction: column; gap: var(--sp-025); min-width: 0; }
.rg-hero h2 { margin: 0; font-family: var(--font); font-size: var(--fs-h); line-height: 1.25; font-weight: var(--fw-semi); }
.rg-hero-acts { display: flex; gap: var(--sp-200); }

.rg-link {
  padding: 0; border: 0; background: none;
  color: var(--acc-ink);
  font: inherit; font-size: var(--fs-s); font-weight: var(--fw-med);
  cursor: pointer;
}
.rg-link.rg-danger { color: var(--danger-ink); }

.rg-back {
  display: inline-flex; align-items: center; gap: var(--sp-050);
  align-self: flex-start;
  padding: 0; border: 0; background: none;
  color: var(--acc-ink);
  font: inherit; font-size: var(--fs-s); font-weight: var(--fw-med);
  cursor: pointer;
}
:root .rg-group .rg-row .rg-end > .numfield:not(.with-steps) { width: auto; flex: none; }
:root .rg-group .rg-row .numfield:not(.with-steps) > input.input.num:not([type=checkbox]):not([type=radio]) {
  width: 8em; height: auto;
  padding: var(--sp-075) var(--sp-100);
  margin-right: calc(-1 * var(--sp-100));
  border: 0; border-radius: var(--r-s); background: none; box-shadow: none;
  text-align: right;
}
:root .rg-group .rg-row .field-icon { flex: 0 1 200px; min-width: 0; }
:root .rg-group .rg-row .field-icon > input.input.date:not([type=checkbox]):not([type=radio]) {
  height: auto; padding: var(--sp-075) var(--sp-400) var(--sp-075) var(--sp-100);
  border: 0; border-radius: var(--r-s); background: none; box-shadow: none;
  text-align: right;
}

.rg-empty { padding: var(--sp-250) var(--sp-200); color: var(--ink3); text-align: center; }

.rg-val.rg-with-sample { display: inline-flex; align-items: center; gap: var(--sp-100); }
.rg-thumb {
  display: block;
  max-width: calc(var(--sp-600) * 2); height: var(--sp-400);
  object-fit: contain;
  border-radius: var(--r-xs);
}
.rg-foot .rg-danger-text { color: var(--danger-ink); }
.rg-hero.over { background: var(--acc-weak); border-radius: var(--r); }
.rg-hero-face { display: contents; }
.rg-hero.rg-hero-centered {
  flex-direction: column; text-align: center; gap: var(--sp-150);
  padding: var(--sp-400) var(--sp-300) var(--sp-300);
  background: var(--card); border-radius: var(--r-l);
}
.rg-hero-centered .rg-hero-text { align-items: center; gap: var(--sp-050); }
.rg-hero-centered .rg-hero-face { display: inline-grid; position: relative; }
.rg-hero-centered .rg-avatar.rg-big { width: calc(var(--sp-600) * 2); height: calc(var(--sp-600) * 2); font-size: var(--fs-num); }
.rg-hero-badge {
  position: absolute; right: 0; bottom: 0;
  width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--acc-solid); color: #FFFFFF; border: var(--sp-050) solid var(--card);
  box-sizing: content-box; padding: 0; cursor: pointer;
}
.rg-hero-badge:hover { filter: brightness(1.1); }
.rg-hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-050) var(--sp-200);
  margin-top: var(--sp-050); color: var(--ink3); font-size: var(--fs-s);
}
.rg-hero-fact { display: inline-flex; align-items: center; gap: var(--sp-050); }

.rg-save-note { color: var(--ink2); flex: 0 1 auto; }

.si-groups { display: flex; flex-direction: column; gap: var(--sp-300); min-width: 0; }
.rg-list-wrap { display: flex; flex-direction: column; gap: var(--sp-200); min-width: 0; }
.si-wells { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-100); }
.cp-pop:has(> .si-pal) { width: max-content; }
.si-pal { display: flex; flex-direction: column; gap: var(--sp-150); }
.si-pal-grid { display: grid; grid-template-columns: repeat(6, auto); gap: var(--sp-100); }
.si-pal-foot { padding-top: var(--sp-150); border-top: var(--bw) solid var(--line); }

.rg-row.rg-logo-row { gap: var(--sp-300); padding-block: var(--sp-200); flex-wrap: wrap; }
.rg-logo-preview { display: flex; flex-direction: column; gap: var(--sp-100); flex: none; }
.rg-logo-tile {
  display: grid; grid-template-columns: 1fr 1px 1fr; align-items: stretch;
  width: var(--rail-w); height: var(--topbar-h);
  padding: var(--sp-100) var(--sp-150);
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 var(--bw) var(--line);
  overflow: hidden;
}
.rg-logo-half { display: flex; align-items: center; min-width: 0; min-height: 0; padding: var(--sp-050) var(--sp-100); }
.rg-logo-half.rg-logo-ours { justify-content: flex-end; }
.rg-logo-half.rg-logo-ours > svg { width: 100%; height: 100%; }
.rg-logo-half > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rg-logo-line { width: 1px; background: currentColor; opacity: .2; }
.rg-logo-cap { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.rg-logo-tile.rg-logo-light { background: var(--sheet-bg); color: var(--sheet-ink); }
.rg-logo-tile.rg-logo-dark { background: var(--sheet-ink); color: var(--sheet-bg); }
.rg-logo-tile { zoom: 1.5; }
@container screen (max-width: 779px) { .rg-logo-tile { zoom: 1.25; } }
@container screen (max-width: 339px) { .rg-logo-tile { zoom: 1; } }

.rg-section.over > .rg-group { box-shadow: inset 0 0 0 var(--bw-sel) var(--acc); }

.rg-row.rg-storage { flex-direction: column; align-items: stretch; gap: var(--sp-150); padding-block: var(--sp-200); }
.rg-storage-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-150); flex-wrap: wrap; }
.rg-storage-num { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.rg-storage-track { height: var(--sp-100); border-radius: var(--r-full); background: var(--a-200); }
.rg-storage.tight .rg-storage-top .rg-sub { color: var(--warn-ink); }
.rg-storage.over .rg-storage-top .rg-sub { color: var(--danger-ink); }

.rg-row .code-value { font-size: var(--fs-num-s); letter-spacing: .12em; }
.rg-ring { flex: none; display: inline-flex; width: var(--h-btn); height: var(--h-btn); }
.rg-ring svg { display: block; transform: rotate(-90deg); }
.rg-ring-track { fill: none; stroke: var(--a-200); stroke-width: 3; }
.rg-ring-live { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round;
                transition: stroke-dashoffset 1s linear; }
.rg-soon .rg-ring-live { stroke: var(--warn); }
.rg-soon .rg-val { color: var(--warn-ink); }
.rg-val.rg-good { color: var(--good-ink); }
.rg-val.rg-warn { color: var(--warn-ink); }
.rg-val.rg-empty-val { color: var(--ink3); }
.rg-val.rg-over { color: var(--danger-ink); }
.rg-pick {
  display: inline-flex; align-items: center; gap: var(--sp-050);
  max-width: 100%; min-width: 0;
  margin-left: calc(-1 * var(--sp-100));
  padding: var(--sp-050) var(--sp-100);
  border: 0; border-radius: var(--r-s);
  background: none; color: var(--ink);
  font: inherit; text-align: left;
  cursor: pointer;
}
.rg-pick:hover:not(:disabled) { background: var(--a-100); }
.rg-pick.rg-empty-val { color: var(--ink3); }
.rg-pick.invalid { color: var(--danger-ink); }
.rg-stale .code-value { opacity: .55; }
[data-motion="calm"] .rg-ring-live { transition: none; }
@media (prefers-reduced-motion: reduce) { .rg-ring-live { transition: none; } }

.nd-sheet {
  padding: var(--sp-300);
  border-radius: var(--r);
  background: var(--sheet-desk, var(--a-100));
  overflow: hidden;
}
.nd-sheet-host { width: max-content; margin: 0 auto; }

.rg-group { container-type: inline-size; }
@container (max-width: 360px) {
  .rg-row:not(.rg-stack) { flex-wrap: wrap; row-gap: var(--sp-050); }
  .rg-row:not(.rg-stack):not(.rg-field) > .rg-main { flex-basis: 0; min-width: min(8em, 100%); }
  .rg-row > .rg-end { max-width: 100%; }
  .rg-row > .rg-end:has(> .swatches) { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  :root .rg-group .rg-row > :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input)) {
    max-width: 100%; text-align: left;
  }
}

/* 15.960: a setting's «?» after its name — quiet, brighter under the pointer; its words in a card at a press */
.rg-help { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: var(--sp-050);
  vertical-align: -4px; border-radius: 50%; color: var(--ink3); cursor: help; }
.rg-help:hover, .rg-help:focus-visible { color: var(--ink); background: var(--a-200); }
/* 15.989: with a mouse the mark keeps its place unseen until the pointer rests on the row 2 s (`helpMark`), stays
   while the pointer is near, then fades; a finger sees it always */
@media (hover: hover) {
  .rg-help { opacity: 0; pointer-events: none; transition: opacity var(--dur-fold) var(--ease-out); }
  .rg-help:is(.shown, .open, :focus-visible) { opacity: 1; pointer-events: auto; }
}
.cp-pop:has(> .help-pop) { width: min(320px, calc(100vw - 2 * var(--sp-200))); }
.help-pop { display: flex; flex-direction: column; gap: var(--sp-075); padding: var(--sp-200); }
.help-pop-t { font-weight: 600; }
.help-pop-text { margin: 0; color: var(--ink2); font-size: var(--fs-s); line-height: var(--lh-s); }
/* a how-to in numbered steps (15.971, `helpSteps`) */
.help-steps { display: flex; flex-direction: column; gap: var(--sp-150); margin: 0; padding: 0; list-style: none;
              counter-reset: help-step; color: var(--ink); }
.help-steps > li { display: grid; grid-template-columns: var(--sp-300) minmax(0, 1fr); gap: var(--sp-150);
                   align-items: start; counter-increment: help-step; }
.help-steps > li::before { content: counter(help-step); display: block; width: var(--sp-300); height: var(--sp-300);
                           border-radius: var(--r-full); background: var(--acc-weak); color: var(--acc-ink);
                           font-size: var(--fs-s); font-weight: var(--fw-semi); }