/* Shell visual language and measurements follow the live Fintablo product; the navigation lists service destinations
   only. Component controls in the financing workspace continue to use the shared design-system tokens. */
@font-face {
  font-family: FinTabloIcons;
  src: url("/assets/finpl-icons.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.core-icon {
  display: inline-block;
  flex: none;
  font: 400 19px/1 FinTabloIcons;
  width: 22px;
  text-align: center;
  font-synthesis: none;
  speak: none;
}
.nav-info-icon {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  mask: url("/assets/icons/info.svg") center/24px 24px no-repeat;
}
.product-header {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px 0 12px;
  background: var(--ft-menu-surface);
  color: var(--ft-text-nav);
}
.product-header .brand {
  height: auto;
  min-height: 0;
  flex: none;
}
.product-header .brand img {
  width: 154px;
  height: auto;
}
.product-header .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ft-text-nav);
}
.product-header .menu-toggle:hover {
  background: var(--ft-menu-hover-surface);
}
.menu-mobile-icon {
  display: none;
}
.sidebar-collapsed .menu-collapse-icon {
  transform: rotate(180deg);
}
.header-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-left: auto;
  color: var(--ft-text-nav);
  font-size: 16px;
  line-height: 22.857px;
}
.product-sidebar {
  position: fixed;
  inset: 60px auto 0 0;
  width: 225px;
  padding: 0;
  background: var(--ft-menu-surface);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 4;
  display: block;
}
.product-sidebar[hidden] {
  display: none;
}
.product-nav {
  min-height: 100%;
  margin: 0;
  padding: 12px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-nav .nav-root {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 15px 6px 34px;
  font-size: 16px;
  line-height: 22.857px;
  color: var(--ft-text-nav);
  font-weight: 400;
  border-radius: 0;
  text-decoration: none;
}
.product-nav .nav-root:hover {
  background: var(--ft-field-active-surface);
  color: var(--ft-link);
}
.product-nav .nav-root[aria-current] {
  color: var(--ft-link);
  font-weight: 600;
}
.product-main {
  margin: 60px 0 0 225px;
  min-height: calc(100svh - 60px);
  padding: 32px 30px;
  display: grid;
  align-content: center;
  justify-items: center;
}
.sidebar-collapsed .product-main {
  margin-left: 0;
}
.nav-backdrop {
  position: fixed;
  z-index: 3;
  inset: 60px 0 0;
  border: 0;
  background: rgba(39, 57, 113, 0.14);
  padding: 0;
}
.nav-backdrop[hidden] {
  display: none;
}
.skip-link {
  z-index: 6;
}
.service-stage {
  display: contents;
}
.service-toolbar,
.service-navigation {
  display: none;
}
/* The client journey uses the intro's open canvas, not a core dashboard. */
body[data-layout="service"] .product-sidebar,
body[data-layout="service"] .menu-toggle,
body[data-layout="service"] .nav-backdrop,
body[data-layout="service"] .header-help {
  display: none !important;
}
body[data-layout="service"] .product-header {
  position: relative;
  inset: auto;
  height: 88px;
  padding: 24px 40px;
  background: transparent;
  gap: 24px;
}
body[data-layout="service"] .product-main {
  margin: 0;
  min-height: calc(100svh - 88px);
  padding: 40px 48px 64px;
  align-content: center;
}
@media (max-width: 899px) {
  body[data-layout="service"] .product-header {
    height: 76px;
    padding: 16px 24px;
  }
  body[data-layout="service"] .product-main {
    min-height: calc(100svh - 76px);
    padding: 24px 24px 48px;
    align-content: start;
  }
}
@media (max-width: 380px) {
  body[data-layout="service"] .product-header {
    padding: 16px;
    gap: 16px;
  }
  body[data-layout="service"] .product-header .brand img {
    width: 128px;
  }
  body[data-layout="service"] .product-main {
    padding: 24px 16px 40px;
  }
}
body[data-layout="intro"] .product-header {
  position: absolute;
  background: transparent;
  padding: 0 32px;
}
body[data-layout="intro"] .product-sidebar,
body[data-layout="intro"] .menu-toggle,
body[data-layout="intro"] .header-help,
body[data-layout="intro"] .nav-backdrop {
  display: none !important;
}
body[data-layout="intro"] .product-main {
  margin: 60px 0 0;
  min-height: calc(100svh - 60px);
  padding: 32px 48px;
  align-content: center;
}
@media (max-width: 899px) {
  .product-header {
    height: 60px;
    padding: 0 16px;
    gap: 12px;
  }
  .product-header .brand img {
    width: 144px;
  }
  .product-header .menu-toggle {
    width: 32px;
    min-height: 44px;
  }
  .menu-collapse-icon {
    display: none;
  }
  .menu-mobile-icon {
    display: block;
  }
  .header-help {
    font-size: 14px;
    min-height: 44px;
  }
  .product-sidebar {
    position: fixed;
    inset: 60px auto 0 0;
    width: 225px;
    overflow: auto;
    display: none;
  }
  .mobile-nav-open .product-sidebar:not([hidden]) {
    display: block;
  }
  .product-nav {
    display: flex;
    margin: 0;
    padding: 12px 0 16px;
    min-height: 100%;
  }
  .product-nav .nav-root {
    min-height: 44px;
  }
  .product-main,
  .sidebar-collapsed .product-main {
    margin: 60px 0 0;
    min-height: calc(100svh - 60px);
    padding: 32px 24px 48px;
    align-content: start;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  body[data-layout="intro"] .product-header {
    padding: 0 24px;
  }
  body[data-layout="intro"] .product-main {
    padding: 32px 24px;
    align-content: center;
  }
}
@media (max-width: 380px) {
  .product-main,
  .sidebar-collapsed .product-main {
    padding: 28px 16px 40px;
  }
  .header-help {
    font-size: 14px;
    gap: 2px;
  }
  .product-header {
    gap: 8px;
  }
  body[data-layout="intro"] .product-header {
    padding: 0 16px;
  }
  body[data-layout="intro"] .product-main {
    padding: 28px 16px 32px;
  }
}

/* Local service destinations, aligned with the working composition. */
html:has(body[data-service-nav="visible"]) {
  scrollbar-gutter: stable;
}
body[data-layout="service"][data-service-nav="visible"] .service-stage {
  display: grid;
  align-content: start;
  min-height: calc(100svh - 88px);
  padding: 40px 0 64px;
}
body[data-layout="service"][data-service-nav="visible"] .service-toolbar:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  width: min(1080px, calc(100% - 96px));
  margin: 0 auto 32px;
}
body[data-layout="service"][data-service-nav="visible"] .service-navigation:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
.service-toolbar .service-new-request {
  justify-self: end;
  gap: 8px;
  height: 44px;
  line-height: 22px;
  padding: 10px 16px;
  white-space: nowrap;
}
.service-toolbar .service-new-request[hidden] {
  display: none;
}
.service-add-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  font: 400 18px/18px FinTabloIcons;
}
.service-add-icon::before {
  content: "\e958";
}
@media (max-width: 1023px) {
  body[data-layout="service"][data-service-nav="visible"] .service-toolbar:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.service-navigation a {
  display: inline-flex;
  flex: 0 0 168px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ft-text-nav);
  text-decoration: none;
  white-space: nowrap;
}
/* The current item is semibold (aria-current). Every label keeps a hidden semibold copy of itself (data-label) as a
   second, empty row, so an item has one width, and the items one position, on every page. */
.service-navigation a > span:last-child {
  display: inline-grid;
  justify-items: center;
}
.service-navigation a > span:last-child::after {
  content: attr(data-label);
  height: 0;
  visibility: hidden;
  font-weight: 600;
}
/* "О" never stays alone at the end of a line. */
.service-navigation #service-about > span:last-child {
  white-space: nowrap;
}
/* Where the toolbar is narrower than the four slots (about 761-835 px, and 1024-1067 px next to Новая заявка),
   the slots of the short items give way down to their label, so the menu fits without a sideways scroll. */
@media (max-width: 1079px) {
  body[data-layout="service"][data-service-nav="visible"] .service-navigation:not([hidden]) {
    width: 100%;
  }
  .service-navigation a {
    flex-shrink: 1;
  }
}
.service-icon-requests {
  --icon: url("/assets/icons/requests.svg");
}
.service-icon-profile {
  --icon: url("/assets/icons/person.svg");
}
.service-icon-about {
  --icon: url("/assets/icons/info.svg");
}
.service-navigation a:hover {
  background: var(--ft-menu-hover-surface);
}
.service-navigation a[aria-current="page"] {
  background: var(--ft-menu-hover-surface);
  color: var(--action);
  font-weight: 600;
}
body[data-layout="service"][data-service-nav="visible"] .product-main {
  min-height: 0;
  padding: 0 48px;
  align-content: start;
}
@media (max-width: 899px) {
  body[data-layout="service"][data-service-nav="visible"] .service-stage {
    min-height: calc(100svh - 76px);
    padding: 24px 0 48px;
    align-content: start;
  }
  body[data-layout="service"][data-service-nav="visible"] .service-toolbar:not([hidden]) {
    width: calc(100% - 48px);
    margin-bottom: 28px;
  }
  body[data-layout="service"][data-service-nav="visible"] .product-main {
    padding: 0 24px;
  }
  .service-navigation a {
    padding: 10px 14px;
  }
}
/* The icon above the label (the four labels in a row need about 736 px with their semibold width). The items share
   the row by their labels, which wrap between words only; the items take the height of the tallest one and keep the
   icons on one line. */
@media (max-width: 760px) {
  body[data-layout="service"][data-service-nav="visible"] .service-navigation:not([hidden]) {
    align-items: stretch;
  }
  .service-navigation a {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 6px;
    white-space: normal;
    text-align: center;
  }
}
/* Where the labels no longer fit in one line each (the four semibold labels need about 544 px), every word of a label
   takes its own line on every page: the wrap does not depend on which item is current. */
@media (max-width: 559px) {
  .service-navigation a > span:last-child {
    width: min-content;
  }
}
@media (max-width: 480px) {
  .service-navigation {
    gap: 4px !important;
  }
  .service-navigation a {
    font-size: 14px;
  }
  .service-navigation a > span:last-child {
    min-height: 40px;
    align-content: center;
  }
  /* The ring 2 px around the item, inside the 4 px gap to the next one. */
  .service-navigation a:focus-visible {
    outline-offset: 0;
  }
}
/* The four labels stay in one row on the narrowest phones: "организации" and "О сервисе" stay whole at 12 px. */
@media (max-width: 359px) {
  .service-navigation a {
    padding: 8px 4px;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  body[data-layout="service"][data-service-nav="visible"] .service-toolbar:not([hidden]) {
    width: calc(100% - 32px);
  }
  body[data-layout="service"][data-service-nav="visible"] .product-main {
    padding: 0 16px;
  }
}

/* Shared working navigation stays at the same coordinates across sections. */
@media (min-width: 900px) {
  body[data-layout="service"][data-service-nav="visible"] .product-header {
    height: 60px;
    padding: 10px 40px;
  }
  body[data-layout="service"][data-service-nav="visible"] .service-stage {
    min-height: calc(100svh - 60px);
    padding: 8px 0 16px;
  }
  body[data-layout="service"][data-service-nav="visible"] .service-toolbar:not([hidden]) {
    margin-bottom: 12px;
  }
}

/* One grid for every screen.
   Column = 1080 px (service menu, lists, questionnaire, options, intro, about, profile, sent screen).
   Wide working surface = 1160 px (application form, request card, partner sheet): it bleeds 40 px past
   the column and its content starts exactly on the column edge (40 px inset), so text never shifts
   between the menu and the sheet. One header (60 px), one primary button and one field per DS tokens. */
html {
  scrollbar-gutter: stable;
}
@media (min-width: 900px) {
  body[data-layout="service"] .product-header {
    height: 60px;
    padding: 10px 40px;
  }
  body[data-layout="service"] .product-main {
    min-height: calc(100svh - 60px);
  }
  body[data-layout="intro"] .product-header {
    padding: 0 40px;
  }
  #app#app .about-tour,
  #app#app .profile-scene,
  #app#app .request-sent-scene,
  #app#app[data-screen="saved"] .success-scene {
    width: min(100%, 1080px);
    max-width: 1080px;
  }
  #app#app[data-screen="request"] .request-scene,
  #app#app[data-screen="request"] .request-group-detail {
    width: min(100%, 1160px);
    max-width: 1160px;
  }
  #app#app[data-screen="apply"] .application-card,
  #app#app[data-screen="request"] .request-paper,
  #app#app[data-screen="partner"] .partner-profile-paper {
    padding-left: 40px;
    padding-right: 40px;
  }
  #app#app .button {
    height: var(--ft-button-height);
    min-height: var(--ft-button-height);
    padding: 0 var(--ft-button-padding-x);
    font-size: 14px;
    line-height: 17.598px;
  }
  /* Questionnaire hero inputs (INN, amount: one large value per step, 22 px) stay a separate accepted component. */
  #app#app .field:not(.fit-inn-field):not(:has(.fit-money-control)) input:not([type="checkbox"]):not([type="radio"]),
  #app#app .profile-field input {
    height: var(--ft-input-height);
    padding: 0 var(--ft-input-padding-x);
    font-size: 14px;
    line-height: 17.598px;
  }
}

/* No global "primary button on the right" rule: it made the button jump between screens.
   Buttons keep their own places; only the placements below move a button to the right. */
@media (min-width: 900px) {
  #app#app .request-workspace-heading:has(.request-footer) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  #app#app .request-workspace-heading > .request-footer {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    position: static;
  }
  #app#app .request-workspace-heading > .request-footer .request-choice-actions {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 24px;
  }
}

#app#app .request-menu {
  order: 100;
}