@font-face {
  font-family: Dossier;
  src: url("/assets/SourceSansPro-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Dossier;
  src: url("/assets/SourceSansPro-Semibold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
/* Accessibility adaptation: secondary text #65696D; primary default uses DS hover, hover uses DS nav; error text uses
   DS danger-hover. Canonical tokens stay unchanged. */
/* Roles and states follow the Fintablo Design System; canonical tokens live in fintablo-tokens.css. */
:root {
  color-scheme: light;
  --paper: var(--ft-popup-surface);
  --workspace: var(--ft-workspace-surface);
  --ink: var(--ft-text-body);
  --muted: #65696d;
  --action: var(--ft-primary-hover);
  --action-hover: var(--ft-text-nav);
  --action-wash: var(--ft-menu-hover-surface);
  --error: var(--ft-danger-hover);
  --success: var(--ft-success);
  /* Colors without a DS token. */
  --application-surface: #eef2fb;
  --option-stroke: #e3e7ef;
  --read-field-surface: #f5f6f9;
  --stage-surface: #f5f6f8;
  --stage-current-surface: #eaf0ff;
  --stage-done-surface: #edf7f0;
  --stage-done-text: #286343;
  --stage-delivered-surface: #dff1e5;
  --stage-delivered-text: #1f6841;
  --success-mark: #278452;
  --success-wash: #eaf6ee;
  --success-ink: #235f3e;
  --sent-check: #28754b;
  --dialog-shadow: #27397126;
  --dialog-backdrop: #27397133;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--workspace);
  color: var(--ink);
  font:
    16px/23px Dossier,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a {
  color: var(--ft-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a,
button,
input,
summary {
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--action);
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0;
  font-weight: 600;
  text-wrap: balance;
}
h2 {
  font-size: 22px;
  line-height: 31.5px;
  font-weight: 600;
}
.ft-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}
.brand {
  display: flex;
  align-items: center;
}
.brand img {
  display: block;
  width: 160px;
  height: auto;
}
.catalog-scene {
  width: min(100%, 1000px);
}
.lead {
  font-size: 18px;
  line-height: 26px;
  color: var(--muted);
  margin-top: 12px;
  text-wrap: pretty;
}
.partner-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.partner-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--ft-popup-stroke);
  border-radius: 16px;
  padding: 24px 32px;
  color: var(--ink);
  transition: background 0.15s;
}
.partner-card:hover {
  text-decoration: none;
  background: var(--ft-field-active-surface);
}
.partner-card:active {
  background: var(--ft-field-hover-surface);
}
.card-brand {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}
.partner-logo {
  display: block;
  width: 156px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}
.partner-logo-fordewind {
  width: 168px;
  height: 40px;
}
.partner-logo-sovcombank {
  width: 184px;
  height: 44px;
}
.partner-logo-mspbank {
  width: 164px;
}
.partner-category {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  text-align: right;
  max-width: 132px;
}
.card-offer {
  margin-top: 24px;
}
.partner-product {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  margin-bottom: 8px;
}
.card-offer h2 {
  font-size: 20px;
  line-height: 25.14px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.partner-summary {
  font-size: 16px;
  line-height: 20.112px;
  color: var(--ink);
  margin-top: 8px;
}
.card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ft-link);
  font-size: 14px;
  line-height: 20px;
  margin-top: auto;
  padding-top: 24px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 37px;
  padding: 0 32px;
  font-size: 14px;
  font-weight: 600;
  line-height: 17.598px;
  background: var(--action);
  border: 0;
  border-radius: 5px;
  color: white;
  transition: background 0.15s;
}
.button:hover {
  background: var(--action-hover);
  text-decoration: none;
}
.button:active:not(:disabled) {
  background: var(--action-hover);
}
.button:disabled {
  opacity: 1;
  background: var(--ft-primary-disabled);
}
form[aria-busy="true"] .button:disabled {
  background: var(--action);
}
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 24px;
}
.requirements ul,
.terms ul {
  padding-left: 20px;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
  line-height: 23px;
}
.terms {
  margin-top: 24px;
}
.terms summary {
  display: flex;
  align-items: center;
  min-height: 37px;
  color: var(--ft-link);
  cursor: pointer;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}
.terms p {
  max-width: 720px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 23px;
}
.terms a {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  font-size: 14px;
  line-height: 20px;
}
.form-scene {
  width: min(100%, 560px);
}
.form-partner {
  margin-bottom: 24px;
}
.form-partner .partner-logo {
  height: 32px;
  width: 168px;
}
.form-partner .partner-logo-sovcombank {
  height: 44px;
}
#application {
  margin-top: 32px;
}
.field label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 8px;
}
.field input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 17.598px;
  color: var(--ft-field-filled-text);
  background: var(--ft-field-default-surface);
  border: 1px solid var(--ft-field-default-stroke);
  border-radius: 4px;
  caret-color: var(--action);
  box-shadow: none;
}
.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.field input:hover:not(:disabled):not(:focus) {
  background: var(--ft-field-hover-surface);
}
.field input:focus {
  outline: none;
  background: var(--ft-field-active-surface);
  border-color: var(--ft-field-active-stroke);
}
.field input:disabled {
  background: var(--ft-field-disabled-surface);
  border-color: var(--ft-field-disabled-stroke);
  color: var(--ft-field-disabled-text);
}
.field input[aria-invalid="true"] {
  border-color: var(--ft-field-error-stroke);
}
.field input[aria-invalid="true"]:not(:focus) {
  background: var(--ft-field-error-surface);
}
.application-comment {
  margin-top: 24px;
}
.application-comment label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.optional-field {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}
.application-comment textarea {
  display: block;
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--ft-field-filled-text);
  background: var(--ft-field-default-surface);
  border: 1px solid var(--ft-field-default-stroke);
  border-radius: 4px;
  caret-color: var(--action);
  box-shadow: none;
}
.application-comment textarea:hover:not(:disabled):not(:focus) {
  background: var(--ft-field-hover-surface);
}
.application-comment textarea:focus {
  outline: none;
  background: var(--ft-field-active-surface);
  border-color: var(--ft-field-active-stroke);
}
.application-comment textarea:disabled {
  resize: none;
  background: var(--ft-field-disabled-surface);
  border-color: var(--ft-field-disabled-stroke);
  color: var(--ft-field-disabled-text);
}
.application-comment textarea[aria-invalid="true"] {
  border-color: var(--ft-field-error-stroke);
}
.application-comment textarea[aria-invalid="true"]:not(:focus) {
  background: var(--ft-field-error-surface);
}
.comment-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.comment-caption p {
  margin: 0;
  max-width: 440px;
}
.comment-caption span {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.request-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 8px;
  font-size: 16px;
  line-height: 24px;
}
.field-error {
  font-size: 14px;
  line-height: 20px;
  color: var(--error);
  margin-top: 8px;
}
.field-error:empty {
  display: none;
}
.field + .field {
  margin-top: 24px;
}
.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.contact-fields .field {
  margin: 0;
}
.application-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.application-basics .field {
  margin: 0;
}
.save-note {
  font-size: 14px;
  color: var(--muted);
  line-height: 20px;
  margin-top: 24px;
  max-width: 560px;
}
.text-button {
  color: var(--ft-link);
  background: transparent;
  border: 0;
  border-radius: 5px;
  min-height: 37px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 17.598px;
  font-weight: 600;
}
.text-button:hover {
  color: var(--action-hover);
  background: var(--action-wash);
}
.submit-error {
  color: var(--error);
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
}
.narrow-scene,
.success-scene {
  width: min(100%, 520px);
}
.receipt-number {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.requests-scene {
  width: min(100%, 840px);
}
.request-list {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.request-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--ft-popup-stroke);
  border-radius: 16px;
  padding: 24px 32px;
  color: var(--ink);
}
.request-card:hover {
  color: var(--ink);
  text-decoration: none;
  background: var(--ft-field-active-surface);
}
.request-scene {
  width: min(100%, 680px);
}
.empty-state {
  margin-top: 20px;
}
.empty-state .button {
  margin-top: 32px;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--paper);
  padding: 12px 16px;
  border-radius: 5px;
  z-index: 3;
}
.skip-link:focus {
  top: 16px;
}
.no-script {
  padding: 24px 32px;
}
@media (max-width: 1200px) and (min-width: 900px) {
  .card-brand {
    height: 68px;
    display: grid;
    gap: 8px;
    align-content: start;
  }
  .partner-category {
    text-align: left;
    max-width: none;
  }
}
/* Mobile touch targets are a documented project adaptation, not another DS button family. */
@media (max-width: 899px) {
  .button,
  .text-button,
  .back-link,
  .terms summary,
  .terms a {
    min-height: 44px;
  }
  .field input {
    height: 44px;
  }
}
@media (max-width: 760px) {
  .partner-grid {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .partner-card,
  .request-card {
    padding: 24px;
  }
  .card-brand {
    gap: 8px;
  }
  .partner-logo-sovcombank {
    width: 168px;
  }
  .partner-category {
    max-width: 112px;
  }
  .contact-fields {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .actions .button {
    width: 100%;
  }
  .actions {
    gap: 16px;
  }
}
@media (max-width: 380px) {
  .card-brand {
    height: auto;
    min-height: 68px;
    display: grid;
    gap: 8px;
  }
  .partner-category {
    max-width: none;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .partner-card,
  .button {
    transition: none;
  }
}
/* Keep the final application action visible on a short desktop without scaling type. */
@media (min-width: 900px) and (max-height: 850px) {
  #app[data-screen="apply"] .back-link {
    margin-bottom: 8px;
  }
  #app[data-screen="apply"] .form-partner {
    margin-bottom: 16px;
  }
  #app[data-screen="apply"] .lead {
    margin-top: 8px;
  }
  #app[data-screen="apply"] .selected-partners {
    margin-top: 12px;
  }
  #application {
    margin-top: 20px;
  }
  #application .contact-fields,
  #application .application-comment {
    margin-top: 16px;
  }
  #application .application-comment textarea {
    min-height: 92px;
  }
  #application .save-note {
    margin-top: 12px;
  }
  #application > .actions {
    margin-top: 20px;
  }
}
@media (max-width: 760px) {
  .application-basics {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Exact original product glyphs; extraction and source hashes in docs/provenance/icons.json. */
span.ft-icon {
  background: currentColor;
  mask: var(--icon) center/contain no-repeat;
}
.ft-icon-bank {
  --icon: url("/assets/icons/bank.svg");
}
.ft-icon-arrow-right {
  --icon: url("/assets/icons/arrow-right.svg");
}
.ft-icon-success {
  --icon: url("/assets/icons/success.svg");
}
.ft-icon-arrow-left {
  --icon: url("/assets/icons/arrow-right.svg");
  transform: rotate(180deg);
}
.button img.ft-icon {
  filter: brightness(0) invert(1);
}

.partner-brand {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
.partner-name-fallback {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.partner-name-fallback[hidden],
.partner-brand img[hidden] {
  display: none;
}
.application-card h1 {
  font-size: 28px;
  line-height: 36px;
}
.application-card .application-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.application-card .application-heading .lead {
  margin: 0;
  font-size: 18px;
}
.application-card .form-partner {
  margin-bottom: 16px;
}
.application-card form {
  margin-top: 24px;
}
.application-card .selected-partners {
  margin-top: 16px;
  margin-bottom: 0;
}
.application-company {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 24px;
}
.application-company > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.application-company strong {
  font-size: 17px;
  line-height: 24px;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.application-company > div > span {
  font-size: 14px;
  color: var(--muted);
}
.application-card .comment-caption {
  justify-content: flex-end;
}
.application-card .field input[aria-invalid="true"],
.application-card .application-comment textarea[aria-invalid="true"] {
  background: var(--ft-field-error-surface);
}
.application-card .field input:disabled,
.application-card .application-comment textarea:disabled {
  background: var(--ft-field-disabled-surface);
}
.application-card .save-note {
  margin-top: 16px;
}
.request-progress {
  margin: 28px 0;
}
.request-progress ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.request-progress li {
  padding: 16px 12px;
  border-radius: 10px;
  background: var(--stage-surface);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  min-width: 0;
  /* Lines of even length: a label does not leave its last word alone on a line ("Решение / по заявке") where the line
     above can give one, and keeps the lines it needs where it cannot. */
  text-wrap: balance;
}
.request-progress li[data-state="current"],
.request-progress li[data-state="complete"] {
  background: var(--stage-current-surface);
  color: var(--ft-text-nav);
}
@keyframes working-enter {
  from {
    opacity: 0.55;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 900px) and (max-height: 850px) {
  .application-card {
    padding: 24px 32px;
  }
  .application-card form {
    margin-top: 20px;
  }
  .application-card .application-company {
    padding: 12px 16px;
    margin-bottom: 20px;
  }
  .application-card .contact-fields,
  .application-card .application-comment {
    margin-top: 20px;
  }
  .application-card .actions {
    margin-top: 20px;
  }
  .application-card .application-comment textarea {
    min-height: 80px;
  }
}
@media (max-width: 760px) {
  .application-card {
    border-radius: 16px;
  }
  .application-card h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .application-card .application-basics {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .request-progress ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .request-progress li {
    padding: 12px;
    min-height: 92px;
  }
}
@media (max-width: 380px) {
  .application-card .application-company {
    padding: 12px;
  }
  .request-progress li {
    font-size: 13px;
  }
}
.application-card .application-identity {
  align-items: start;
}
.application-card .application-identity .application-company {
  margin: 0;
}
.application-card .application-heading .form-partner {
  margin: 0;
}
.application-card .application-heading {
  align-items: center;
}
@media (min-width: 900px) and (max-height: 850px) {
  .application-card .application-heading h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .application-card .application-identity .application-company {
    margin: 0;
    min-height: 72px;
  }
}
#app[data-screen="profile"] .profile-scene {
  animation: working-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #app[data-screen="profile"] .profile-scene {
    animation: none;
  }
}
.selected-partners:has(.application-project) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.application-project > summary {
  padding: 8px 0;
  color: var(--action);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.application-project[open] {
  flex-basis: 100%;
}
.preferential-request-parameters dd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.preferential-request-parameters > div:last-child {
  grid-column: 1/-1;
}

/* Common comparison rows, spacious white working surfaces. */
.request-options {
  grid-auto-flow: row;
  align-items: stretch;
  row-gap: 20px;
}
.request-options > .request-option {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 18px;
  padding: 24px;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--option-stroke);
  border-radius: 16px;
}
.request-options > .request-option.is-selected {
  background: var(--paper);
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}
.request-option .request-option-select {
  margin: 0;
  align-self: start;
  min-height: 44px;
}
.request-option .request-option-product {
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  min-height: 0;
}
.comparison-label {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  margin-bottom: 6px;
}
.comparison-amount strong {
  display: block;
  font-size: 23px;
  line-height: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.comparison-cost > span:last-child {
  display: block;
  font-size: 16px;
  line-height: 23px;
}
.comparison-fit {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
}
.comparison-fit > .fit-reason-icon {
  margin-top: 2px;
  flex: none;
}
.request-workspace-heading h1 {
  font-size: 30px;
  line-height: 40px;
}
body:has(#app:is([data-screen="apply"], [data-screen="saved"], [data-screen="request"], [data-screen="about"]))
  .service-toolbar:not([hidden]) {
  margin-bottom: 48px;
}
#app[data-screen="apply"] .form-scene {
  width: min(100%, 1160px);
}
.application-card {
  background: var(--paper);
  padding: 40px 48px 44px;
  border-radius: 20px;
}
.application-card #application {
  margin-top: 28px;
}
.application-card .application-identity {
  display: block;
  margin: 0 0 28px;
}
.application-card .application-company,
#app[data-screen="request"] .application-company {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  gap: 12px;
  align-items: start;
}
.application-card .application-company strong,
#app[data-screen="request"] .application-company strong {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  max-width: 760px;
}
.application-card .application-company > div > span,
#app[data-screen="request"] .application-company > div > span {
  max-width: 760px;
}
.application-card .application-company > .ft-icon {
  margin-top: 2px;
  width: 24px;
  height: 24px;
  color: var(--action);
}
.application-card .application-identity .application-company {
  min-height: 0;
}
.application-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.application-contact-grid .field {
  margin: 0;
}
.application-card .field input {
  height: 48px;
  font-size: 16px;
  background: var(--ft-field-default-surface);
}
.application-card .application-comment textarea {
  min-height: 112px;
  font-size: 16px;
  background: var(--ft-field-default-surface);
}
.application-card .actions {
  margin-top: 28px;
}
.application-card .button,
.success-scene .button,
.request-paper .button,
.about-story .button {
  height: 46px;
  font-size: 16px;
  padding: 0 24px;
}
#application-company-preview:not(:empty) {
  margin-bottom: 28px;
}
#app[data-screen="saved"] .success-scene {
  width: min(100%, 960px);
  padding: 40px 48px 44px;
  background: var(--paper);
  border-radius: 20px;
}
.request-heading {
  flex-wrap: wrap;
}
.request-heading h1,
#app[data-screen="saved"] .success-scene h1 {
  font-size: 30px;
  line-height: 40px;
  margin: 0;
}
.request-paper {
  background: var(--paper);
  border-radius: 20px;
}
#app[data-screen="request"] .request-group-detail {
  width: min(100%, 960px);
  max-width: 960px;
}
.request-paper .application-company {
  margin-top: 24px;
}
.success-scene .request-progress {
  margin: 28px 0 32px;
}
.success-scene .request-progress ol {
  gap: 12px;
}
.success-scene .request-progress li {
  padding: 18px 16px;
  min-height: 104px;
  font-size: 15px;
  line-height: 21px;
}
.request-paper .request-actions,
.success-scene .request-actions {
  margin-top: 28px;
  gap: 20px;
}
.request-delete {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 400;
  margin-left: auto;
  color: var(--muted);
  height: 44px;
}
.request-delete:hover,
.list-delete-request:hover {
  color: var(--error);
}
.request-recovery-note {
  margin-top: 20px;
  max-width: 620px;
  color: var(--muted);
}
.request-paper .request-brief {
  margin: 20px 0 0;
}
.request-paper .request-brief > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
  color: var(--action);
  cursor: pointer;
}
.saved-request-frame {
  position: relative;
  background: var(--paper);
  border-radius: 16px;
}
.saved-request-frame .request-card {
  padding-right: 80px;
  border: 0;
  background: none;
}
.saved-request-frame .list-delete-request {
  position: absolute;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--muted);
}
.saved-request-frame .request-row-action {
  padding-right: 8px;
}
.request-undo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--ink);
}
.request-deleted-scene {
  width: min(100%, 680px);
  background: var(--paper);
  border-radius: 20px;
  padding: 40px;
}
/* One idea at a time; manual story navigation, no autoplay. */
.about-story {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
  padding: 32px 0;
  min-height: 450px;
}
.about-story h1 {
  font-size: 36px;
  line-height: 44px;
  max-width: 440px;
  margin-top: 24px;
  text-wrap: balance;
}
.about-story .lead {
  max-width: 400px;
  margin-top: 20px;
}
.story-position {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .request-options > .request-option {
    padding: 24px;
  }
  .about-story {
    gap: 40px;
  }
  .application-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .application-contact-grid > .field:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  .application-card,
  #app[data-screen="saved"] .success-scene {
    padding: 28px 24px 32px;
  }
  .application-contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .application-card .application-heading h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .success-scene .request-progress li {
    min-height: 94px;
    padding: 16px;
  }
  #app[data-screen="saved"] .success-scene h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .about-story {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 8px 0 24px;
  }
  .about-story h1 {
    font-size: 30px;
    line-height: 38px;
    margin-top: 16px;
  }
  .about-story .actions {
    margin-top: 24px;
  }
  .request-options > .request-option {
    grid-template-rows: auto;
    grid-row: auto;
    gap: 20px;
  }
  .saved-request-frame .request-card {
    padding: 24px 68px 24px 24px;
  }
  .request-delete {
    margin-left: 0;
  }
}
@media (max-width: 380px) {
  .application-card,
  #app[data-screen="saved"] .success-scene {
    padding: 24px 18px 28px;
  }
  .request-heading {
    gap: 10px;
  }
  .success-scene .request-progress ol {
    gap: 8px;
  }
  .request-paper .request-progress li,
  .success-scene .request-progress li {
    font-size: 13px;
    padding: 12px;
  }
  .request-deleted-scene {
    padding: 28px 20px;
  }
}

/* Saved list reserves a separate hit area for deletion. */
.requests-scene .saved-request-frame > .request-row {
  padding-right: 88px;
}
.saved-request-frame .list-delete-request {
  top: 24px;
  transform: none;
}
@media (max-width: 760px) {
  .requests-scene .saved-request-frame > .request-row {
    padding: 24px;
  }
  .saved-request-frame .request-row-primary {
    padding-right: 40px;
  }
}

.request-list-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* One completed request, visible fields and distinct event states. */
.required-mark {
  color: var(--error);
  font-weight: 600;
}
#app[data-screen="request"] .request-scene {
  width: min(100%, 1080px);
  max-width: 1080px;
}
.request-paper {
  padding: 36px 40px 40px;
}
.request-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.request-heading h1 {
  font-size: 28px;
  line-height: 36px;
  flex: 1;
  min-width: 0;
}
.request-heading-icon,
.request-stage-icon {
  display: block;
  flex: none;
  background: currentColor;
  mask: var(--stage-icon) center/contain no-repeat;
  -webkit-mask: var(--stage-icon) center/contain no-repeat;
}
.stage-icon-success {
  --stage-icon: url("/assets/icons/success.svg");
}
.stage-icon-arrow-right {
  --stage-icon: url("/assets/icons/arrow-right.svg");
}
.stage-icon-reports {
  --stage-icon: url("/assets/icons/reports.svg");
}
.stage-icon-document {
  --stage-icon: url("/assets/icons/document.svg");
}
.request-heading-icon {
  width: 32px;
  height: 32px;
  color: var(--success-mark);
}
.request-heading-demo_sent,
.request-heading-delivered {
  background: var(--success-wash);
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--success-ink);
}
.request-heading-demo_sent .request-heading-icon,
.request-heading-delivered .request-heading-icon {
  width: 36px;
  height: 36px;
}
.request-paper .request-progress {
  margin: 24px 0 28px;
}
.request-paper .request-progress ol {
  gap: 12px;
}
.request-paper .request-progress li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 16px;
  background: #f5f6f8;
  color: #7b818a;
  font-size: 14px;
  line-height: 20px;
}
.request-paper .request-progress li[data-completed="true"] {
  background: var(--stage-done-surface);
  color: var(--stage-done-text);
}
.request-paper .request-progress li[data-step="delivered"][data-state="current"] {
  background: var(--stage-delivered-surface);
  color: var(--stage-delivered-text);
}
/* Отказано is not a success: the decision stage, its check and the heading icon take the error colour of the service
   (DS danger-hover) on the neutral stage surface instead of the green of a done stage. */
.request-paper .request-progress[data-status="declined"] li[data-step="processed"] {
  background: var(--stage-surface);
  color: var(--error);
}
.request-stage-icon {
  width: 26px;
  height: 26px;
  color: inherit;
}
.request-progress .stage-confirmed {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 12px;
  height: 12px;
  color: #278452;
}
.request-heading-declined .request-heading-icon {
  color: var(--error);
}
/* The confirmed check of the declined decision: the stage is reached, neither a success (green) nor a check in the
   colour of an error. */
.request-progress[data-status="declined"] li[data-step="processed"] .stage-confirmed {
  color: var(--muted);
}
.request-recipients {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0 0 28px;
}
.request-recipients:has(> .request-recipient:only-child) {
  grid-template-columns: 1fr;
}
.request-group-detail .request-group-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
}
.request-group-detail .request-group-header > .request-heading {
  min-width: 0;
}
.request-group-detail .request-group-header > .actions {
  margin: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.request-group-detail .request-group-header > [data-lifecycle-error] {
  grid-column: 1/-1;
  margin: 0;
}
.request-group-detail .request-recipients {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 40px 0 48px;
}
.request-group-detail .request-recipient {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  min-height: 48px;
}
.request-group-detail .request-recipient > .recipient-terms-link {
  justify-self: end;
}
.request-recipient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 48px;
}
.recipient-terms-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 14px;
  line-height: 20px;
  min-height: 40px;
}
.recipient-terms-link > .ft-icon {
  width: 18px;
  height: 18px;
}
.request-content {
  display: grid;
  gap: 28px;
}
.request-company-section .application-company {
  margin: 0 !important;
}
.request-data-section h2,
.application-project h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  line-height: 27px;
  margin: 0 0 14px;
}
.request-data-section h2 > .ft-icon {
  width: 22px;
  height: 22px;
  color: var(--action);
}
.read-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.read-field {
  min-width: 0;
  padding: 14px 16px 16px;
  background: var(--read-field-surface);
  border-radius: 8px;
}
.read-field dt {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  margin: 0 0 7px;
}
.read-field dd {
  font-size: 16px;
  line-height: 23px;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.read-field-wide {
  grid-column: 1/-1;
}
.read-field .request-message-text {
  font: inherit;
  margin: 0;
  white-space: pre-wrap;
}
.request-paper .request-parameters {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.request-paper .preferential-request-parameters {
  margin-top: 16px;
}
.registry-link {
  display: block;
  font-size: 13px;
  line-height: 18px;
  margin-top: 8px;
  white-space: normal;
}
.application-project {
  display: block;
  margin: 28px 0 0;
  width: 100%;
}
.application-project .request-parameters {
  margin: 0;
  padding: 0;
  background: none;
}
.application-project .read-field {
  padding: 14px 16px;
}
.application-card .application-comment {
  margin-top: 28px;
}
.request-paper .request-actions {
  margin-top: 32px;
}
.request-paper[data-request-status="demo_sent"] .request-actions > .button {
  background: var(--action);
  color: white;
}
@media (max-width: 1100px) {
  .request-recipients {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 899px) {
  .read-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .request-paper {
    padding: 28px 24px;
  }
  .request-heading {
    gap: 12px;
  }
  .request-heading h1 {
    font-size: 24px;
    line-height: 32px;
  }
  .request-heading-demo_sent,
  .request-heading-delivered {
    padding: 18px;
  }
  .request-heading-icon {
    width: 28px;
    height: 28px;
  }
  .request-paper .request-progress li {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 14px 12px;
    min-height: 76px;
    gap: 10px;
    font-size: 13px;
    line-height: 19px;
  }
  .request-stage-icon {
    width: 24px;
    height: 24px;
  }
  .read-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .request-content {
    gap: 24px;
  }
  .request-recipient {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .request-paper .request-actions {
    margin-top: 28px;
  }
  .request-recipients {
    margin-bottom: 24px;
  }
}
@media (max-width: 380px) {
  .request-paper {
    padding: 24px 18px;
  }
  .request-heading h1 {
    font-size: 23px;
    line-height: 30px;
  }
  .request-heading-demo_sent,
  .request-heading-delivered {
    padding: 16px 14px;
  }
  .request-heading-demo_sent .request-heading-icon {
    width: 28px;
    height: 28px;
  }
  .request-paper .request-progress ol {
    gap: 8px;
  }
  .request-paper .request-progress li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 98px;
    padding: 12px;
  }
  .read-field {
    padding: 12px 14px;
  }
}
@media (max-width: 760px) {
  .request-paper .read-fields.request-parameters,
  .application-project .read-fields.request-parameters {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .read-field dd {
    overflow-wrap: break-word;
  }
}
/* One transition per working surface; controls remain active throughout. */
#app[data-screen="catalog"] .catalog-scene,
#app[data-screen="apply"] .application-card,
#app[data-screen="request"] .request-paper,
#app[data-screen="saved"] .success-scene,
#app[data-screen="requests"] .requests-scene,
#app[data-screen="request-sent"] .request-sent-scene {
  animation: request-arrive 600ms cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
@keyframes request-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.request-option .button-secondary {
  background: transparent;
  color: var(--action);
  border: 1px solid var(--action);
  font-size: 14px;
  line-height: 20px;
  padding: 10px 14px;
  height: auto;
  min-height: 44px;
  gap: 10px;
}
.request-option .button-secondary:hover {
  background: var(--ft-field-active-surface);
}
body:has(#app[data-screen="request-sent"]) .service-toolbar:not([hidden]) {
  margin-bottom: 48px;
}
.request-sent-scene {
  width: min(100%, 720px);
  padding: 48px;
  background: var(--paper);
  border-radius: 20px;
  align-self: start;
}
.request-sent-check {
  display: block;
  width: 48px;
  height: 48px;
  color: var(--sent-check);
  font-size: 48px;
  margin-bottom: 24px;
}
.request-sent-scene h1 {
  font-size: 30px;
  line-height: 40px;
  margin: 0;
  outline: none;
}
.request-sent-recipients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  margin-top: 32px;
}
.request-sent-recipients .partner-logo {
  max-width: 200px;
  height: 32px;
}
.request-sent-recipients .partner-logo-window {
  width: 200px;
}
.request-sent-scene .actions {
  margin-top: 40px;
  gap: 24px;
}
.request-sent-scene .button {
  height: 46px;
  font-size: 16px;
  padding: 0 24px;
}
@media (max-width: 760px) {
  .request-sent-scene {
    padding: 32px 24px;
  }
  .request-sent-scene h1 {
    font-size: 26px;
    line-height: 34px;
  }
  .request-sent-scene .actions {
    align-items: flex-start;
    gap: 20px;
  }
  .request-sent-recipients {
    gap: 24px;
    margin-top: 28px;
  }
}
@media (max-width: 380px) {
  .request-sent-scene {
    padding: 28px 20px;
  }
  .request-sent-scene h1 {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app[data-screen="catalog"] .catalog-scene,
  #app[data-screen="apply"] .application-card,
  #app[data-screen="request"] .request-paper,
  #app[data-screen="saved"] .success-scene,
  #app[data-screen="requests"] .requests-scene,
  #app[data-screen="request-sent"] .request-sent-scene {
    animation: none;
  }
}
#app[data-screen="catalog"] .request-workspace {
  animation: request-arrive 600ms cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
body[data-layout="service"] #app[data-screen="catalog"] .partner-card {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #app[data-screen="catalog"] .request-workspace {
    animation: none;
  }
}
.request-workspace-heading {
  margin-bottom: 24px;
}

/* A readable passport of terms; financial values keep their source data. */
body:has(#app[data-screen="catalog"]) .service-toolbar:not([hidden]) {
  margin-bottom: 48px;
}
.existing-request-actions {
  align-items: center;
  gap: 16px 24px;
}
.existing-request-context {
  flex-basis: 100%;
}
.existing-request-context > span {
  font-weight: 600;
  color: var(--action);
}
.existing-request-context p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.existing-request-choice {
  width: 100%;
  max-width: 640px;
  background: var(--paper);
  border-radius: 12px;
  padding: 20px 24px;
}
.existing-request-choice > summary {
  cursor: pointer;
  color: var(--action);
  font-weight: 600;
}
.existing-request-choice > div {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.existing-request-choice a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 12px;
  background: var(--ft-dashboard-surface);
  border-radius: 8px;
}
.existing-request-choice a > span:not(.ft-icon) {
  grid-column: 1;
  font-size: 13px;
  color: var(--muted);
}
.existing-request-choice a > .ft-icon {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
}
/* One visible send action, before long data. Secondary removal remains at the end. */
.request-paper .request-actions-top {
  margin: 20px 0 0;
}
.request-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
.request-stage-help,
.request-stage-help:not([open]),
.request-stage-help[open] {
  position: static;
  display: contents;
  font-weight: 400;
}
/* The content box of <details> would be one more item of the stage grid (a second row and its gap lift the icon
   and the label above the centre line of the neighbour stages). Without its box the hint is hidden by hand. */
.request-stage-help::details-content {
  display: contents;
}
.request-stage-help:not([open]) > p {
  display: none;
}
/* The bottom corner, as the confirmed check (.stage-confirmed) takes the top one on every stage. 2 px from the edges
   the button stays out of the label column (it ends 28 px from the edge), so a label line never runs under it. */
.request-stage-help > summary {
  position: absolute;
  right: 2px;
  bottom: 2px;
  list-style: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--action);
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  font-weight: 600;
}
.request-stage-help > summary::-webkit-details-marker {
  display: none;
}
/* Hover and open as the other summary buttons of the client cabinet (.request-menu); the focus ring inside the
   button, so it covers neither the label nor the edge of the stage. */
.request-stage-help > summary:hover,
.request-stage-help[open] > summary {
  background: var(--ft-menu-hover-surface);
}
.request-stage-help > summary:focus-visible {
  outline-offset: -2px;
}
/* The hint opens above the stage, where nothing of the request lies under it (below the stages come the organization
   and Условия организации), from the left edge of the stage, and from the right edge for the last stage, which is
   in the right column on every width: it stays inside the screen. */
.request-stage-help p {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(300px, calc(100vw - 80px));
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
  box-shadow: 0 4px 24px rgb(25 35 60 / 16%);
  /* Opened near the top of the window, the page scrolls the hint 16 px below the edge, not onto it. */
  scroll-margin: 16px;
}
.request-paper .request-progress li:last-child .request-stage-help p {
  left: auto;
  right: 0;
}
.request-paper .request-progress li:has(.request-stage-help) {
  padding-right: 28px;
}
.request-progress-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  width: min(100%, 680px);
}
.compact-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  text-wrap: balance;
}
.compact-stage-track {
  height: 4px;
  display: block;
  border-radius: 4px;
  background: var(--ft-field-default-stroke);
}
.compact-stage[data-completed="true"] {
  color: var(--success);
}
.compact-stage[data-completed="true"] .compact-stage-track {
  background: var(--success);
}
.request-progress-compact[data-status="declined"] > .compact-stage:last-of-type {
  color: var(--error);
}
.request-progress-compact[data-status="declined"] > .compact-stage:last-of-type .compact-stage-track {
  background: var(--error);
}
.compact-stage[data-state="current"]:not([data-completed="true"]) {
  color: var(--action);
}
.compact-stage[data-state="current"]:not([data-completed="true"]) .compact-stage-track {
  background: var(--action);
}
.compact-progress-note {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 12px;
}
.request-list-state {
  grid-column: 1/-1;
  margin: 0 0 8px;
  padding-right: 32px;
  width: 100%;
}
.requests-scene .saved-request-frame > .request-row {
  row-gap: 20px;
}
@media (max-width: 760px) {
  body:has(#app[data-screen="catalog"]) .service-toolbar:not([hidden]) {
    margin-bottom: 32px;
  }
  .request-paper .request-actions-top {
    margin-top: 20px;
  }
  .request-actions-top > .button {
    width: 100%;
  }
  .existing-request-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .existing-request-choice {
    padding: 18px;
  }
  .request-footer-actions .request-delete {
    margin-left: auto;
  }
}
@media (max-width: 380px) {
  .request-paper .request-progress li:has(.request-stage-help) {
    padding-right: 24px;
  }
  .request-stage-help[open] {
    width: 100%;
  }
  .compact-stage {
    overflow-wrap: normal;
  }
}

/* Compact progress keeps words readable and the trash action separate on narrow cards. */
@media (max-width: 760px) {
  .request-progress-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
  .compact-stage {
    font-size: 12px;
    line-height: 17px;
  }
  .request-list-state {
    padding-right: 32px;
  }
  .saved-request-frame .list-delete-request {
    top: 16px;
    right: 12px;
  }
}

/* Terms are a separate destination, independent of recipient selection. */
.request-option-terms-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: start;
  justify-self: start;
  min-height: 44px;
  color: var(--action);
  font-size: 14px;
  line-height: 20px;
}
.request-option-terms-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
  border-radius: 4px;
}

/* One consent control (client transfer consent = creditor cabinet rules, same numbers). */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 24px;
}
.consent-check input {
  flex: none;
  appearance: auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--action);
  cursor: pointer;
}
.consent-check input:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}
.consent-check input[aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 3px;
}
.consent-copy {
  min-width: 0;
}
.consent-copy label {
  cursor: pointer;
}
.consent-link {
  display: inline;
  padding: 0;
  min-height: 24px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--action);
  font: inherit;
  text-align: left;
  line-height: 24px;
  cursor: pointer;
}
.consent-link:hover {
  color: var(--action-hover);
  text-decoration: underline;
}
.consent-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
.consent-link[aria-busy="true"] {
  cursor: progress;
}
.consent-error:not([hidden]) {
  margin: 0 0 4px 36px;
}
.consent-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100svh - 48px);
  overflow: auto;
  margin: auto;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 40px var(--dialog-shadow);
}
.consent-dialog::backdrop {
  background: var(--dialog-backdrop);
}
.consent-dialog h2 {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
}
.consent-dialog h2:focus {
  outline: none;
}
.consent-dialog-body {
  display: grid;
  gap: 24px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;
}
.consent-document {
  display: grid;
  gap: 12px;
}
.consent-document p {
  margin: 0;
}
.consent-recipients h3,
.consent-document h3 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--muted);
}
.consent-recipients ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.consent-recipients li {
  display: grid;
  gap: 2px;
}
.consent-recipients li span {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.consent-dialog .actions {
  margin-top: 24px;
}
.consent-dialog .text-button {
  min-height: 44px;
}
.request-consent {
  margin-bottom: 8px;
}
.consent-receipt {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.consent-receipt summary {
  width: max-content;
  cursor: pointer;
  color: var(--action);
}
.consent-receipt p {
  margin: 8px 0 0;
}
/* Consent sits next to the send button in the card heading row: one group, primary at the right edge. */
.request-actions-top:has(.request-consent) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.request-actions-top .request-consent {
  margin: 0;
}
/* The usage rules under the transfer consent: a separate link for reading, on the edge of the consent text. */
.request-actions-top .consent-error:not([hidden]) {
  margin: 0 0 0 36px;
}
.consent-dialog .actions {
  display: flex;
  justify-content: flex-end;
}
/* A test operator has no visible name: the pair is not shown at all. */
div:has(> dd#request-assignee:empty) {
  display: none;
}
/* Read-only request data is text on the sheet, not grey boxes that look like inputs. */
#app[data-screen="request"] .read-fields {
  gap: 20px 24px;
}
#app[data-screen="request"] .read-field {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Message under Начать работу after a failed Fintablo sign-in. On two columns it takes no room in the flow,
   so the centered intro never moves; stacked, the artwork follows, so it stays in the flow. */
.intro-copy .intro-sign-in-error {
  max-width: 420px;
  margin: 16px 0 0;
  text-wrap: pretty;
}
#intro-start[aria-busy="true"] {
  cursor: progress;
}
@media (min-width: 900px) {
  .intro-copy {
    position: relative;
  }
  .intro-copy .intro-sign-in-error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}