/*
 * ============================================================
 * NOYTRIX FOR DEVELOPERS — HARD FULL WORKSPACE V53
 *
 * REAL OWNER:
 * #screen-api.api-screen-v38
 * > .api-page-v38
 *
 * DESKTOP ONLY
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     1. ENTIRE AREA TO THE RIGHT OF SIDEBAR
     ========================================================== */

  html body
  #screen-api.api-screen-v38 {

    position:
      fixed
      !important;

    top:
      0
      !important;

    right:
      0
      !important;

    bottom:
      0
      !important;

    left:
      var(
        --nx-dev-left-v53,
        255px
      )
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    overflow:
      hidden
      !important;

    box-sizing:
      border-box
      !important;

    z-index:
      20
      !important;
  }


  /* ==========================================================
     2. PAGE FILLS THE ENTIRE WORKSPACE
     ========================================================== */

  html body
  #screen-api.api-screen-v38
  > .api-page-v38 {

    position:
      absolute
      !important;

    top:
      0.05cm
      !important;

    right:
      0.05cm
      !important;

    bottom:
      0.05cm
      !important;

    left:
      0.05cm
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    box-sizing:
      border-box
      !important;

    overflow-x:
      hidden
      !important;

    overflow-y:
      auto
      !important;
  }


  /*
   * Kill any old width / centered-page limitation.
   */

  html.noytrix-subpage-v27
  body
  #screen-api
  .api-page-v38,

  html body
  #screen-api
  .api-page-v38 {

    max-width:
      none
      !important;

    margin-left:
      0
      !important;

    margin-right:
      0
      !important;
  }


  /* ==========================================================
     3. ALL MAIN SECTIONS USE AVAILABLE WIDTH
     ========================================================== */

  #screen-api
  .api-page-v38
  > * {

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-hero-grid-v38 {

    width:
      100%
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;
  }


  #screen-api
  .api-hero-v38 {

    min-width:
      0
      !important;

    max-width:
      none
      !important;
  }


  /*
   * Let all direct grid children stretch.
   */

  #screen-api
  .api-page-v38
  section,

  #screen-api
  .api-page-v38
  article {

    min-width:
      0
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     4. MAIN HERO
     Keep big headings big — user asked only for tiny text.
     ========================================================== */

  #screen-api
  .api-hero-v38 h1 {

    font-size:
      clamp(
        34px,
        2.45vw,
        48px
      )
      !important;

    line-height:
      1.03
      !important;

    letter-spacing:
      -0.035em
      !important;
  }


  #screen-api
  .api-eyebrow-v38 {

    font-size:
      15px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      850
      !important;

    letter-spacing:
      .09em
      !important;
  }


  #screen-api
  .api-hero-v38
  > p {

    font-size:
      16px
      !important;

    line-height:
      1.48
      !important;

    font-weight:
      600
      !important;

    max-width:
      920px
      !important;
  }


  /* ==========================================================
     5. SMALL TEXT — HARD READABILITY INCREASE
     ========================================================== */

  #screen-api
  .api-page-v38 p {

    font-size:
      15px
      !important;

    line-height:
      1.42
      !important;
  }


  #screen-api
  .api-page-v38 small {

    font-size:
      13px
      !important;

    line-height:
      1.38
      !important;
  }


  #screen-api
  .api-page-v38 li {

    font-size:
      14px
      !important;

    line-height:
      1.4
      !important;
  }


  #screen-api
  .api-page-v38 code {

    font-size:
      13px
      !important;

    line-height:
      1.5
      !important;
  }


  #screen-api
  .api-page-v38 pre {

    font-size:
      13px
      !important;

    line-height:
      1.5
      !important;
  }


  /*
   * Labels / meta / kicker text were especially tiny.
   */

  #screen-api
  .api-page-v38
  [class*="label"],

  #screen-api
  .api-page-v38
  [class*="meta"],

  #screen-api
  .api-page-v38
  [class*="kicker"] {

    font-size:
      13px
      !important;

    line-height:
      1.3
      !important;
  }


  /* ==========================================================
     6. BUTTONS
     ========================================================== */

  #screen-api
  .api-page-v38 button,

  #screen-api
  .api-page-v38 a {

    font-size:
      14px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      750
      !important;
  }


  #screen-api
  .api-btn-primary-v38,

  #screen-api
  .api-btn-secondary-v38 {

    min-height:
      50px
      !important;

    padding-left:
      20px
      !important;

    padding-right:
      20px
      !important;
  }


  /* ==========================================================
     7. CARDS — GIVE CONTENT ROOM
     ========================================================== */

  #screen-api
  .api-page-v38 article {

    overflow:
      hidden;
  }


  #screen-api
  .api-page-v38 article h2,

  #screen-api
  .api-page-v38 article h3 {

    line-height:
      1.15
      !important;
  }


  #screen-api
  .api-page-v38 article h3 {

    font-size:
      18px
      !important;
  }


  #screen-api
  .api-page-v38 article strong {

    font-size:
      16px
      !important;

    line-height:
      1.25
      !important;
  }


  /* ==========================================================
     8. CODE / REQUEST / RESPONSE PANEL
     ========================================================== */

  #screen-api
  .api-page-v38 pre,

  #screen-api
  .api-page-v38 code {

    white-space:
      pre-wrap
      !important;

    overflow-wrap:
      anywhere
      !important;

    word-break:
      break-word
      !important;
  }


  /* ==========================================================
     9. SVG / ICONS
     Font changes must not distort icons.
     ========================================================== */

  #screen-api
  .api-page-v38 svg {

    flex:
      0 0 auto;
  }


  /* ==========================================================
     10. NO HORIZONTAL SCROLL
     ========================================================== */

  #screen-api,

  #screen-api
  .api-page-v38,

  #screen-api
  .api-hero-grid-v38 {

    box-sizing:
      border-box
      !important;

    overflow-x:
      hidden
      !important;
  }


}


/*
 * ============================================================
 * MOBILE / TABLET UNTOUCHED
 * ============================================================
 */

/* NX DEV ROW BALANCE V54 START */

@media (min-width: 1200px) {


  /* ==========================================================
     FOUR MAIN ROWS

     1 = HERO
     2 = WHAT CAN BE CHECKED
     3 = MAIN CONTENT
     4 = BOTTOM CAPABILITIES
     ========================================================== */

  #screen-api
  .api-page-v38 {

    display:
      grid
      !important;

    /*
     * Было визуально:
     * HERO        ~260px
     * SUPPORTED    ~68px
     * MIDDLE      ~400px
     * BOTTOM       ~85px
     *
     * Теперь:
     * HERO          больше
     * SUPPORTED     46px
     * MIDDLE        забирает максимум
     * BOTTOM        62px
     */

    grid-template-rows:
      minmax(282px, 1.15fr)
      46px
      minmax(0, 1.85fr)
      62px
      !important;

    gap:
      10px
      !important;
  }


  /* ==========================================================
     1. TOP / HERO — GIVE IT SPACE TAKEN FROM ROW 2
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(1) {

    min-height:
      0
      !important;

    height:
      100%
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(1)
  > * {

    height:
      100%
      !important;

    min-height:
      0
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-hero-v38 {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    justify-content:
      center
      !important;
  }


  /* ==========================================================
     2. "WHAT CAN BE CHECKED" — MUCH THINNER
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(2) {

    height:
      46px
      !important;

    min-height:
      46px
      !important;

    max-height:
      46px
      !important;

    margin:
      0
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(2)
  > * {

    min-height:
      44px
      !important;

    height:
      44px
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    justify-content:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Не даём иконкам делать эту строку снова высокой.
   */

  #screen-api
  .api-page-v38
  > :nth-child(2)
  svg {

    max-width:
      24px
      !important;

    max-height:
      24px
      !important;
  }


  /* ==========================================================
     3. MIDDLE — BIGGEST AREA
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(3) {

    min-height:
      0
      !important;

    height:
      100%
      !important;

    align-items:
      stretch
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Левая и правая большие панели занимают всю высоту.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > * {

    min-height:
      0
      !important;

    height:
      100%
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Красиво центрируем СОДЕРЖИМОЕ каждой
   * средней большой панели по вертикали,
   * но внутреннюю структуру карточек не ломаем.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > * {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    justify-content:
      center
      !important;
  }


  /*
   * Заголовки средней зоны сохраняем сверху относительно
   * собственного содержимого и даём аккуратный отступ.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > h2:first-child,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > h3:first-child {

    margin-top:
      0
      !important;

    margin-bottom:
      8px
      !important;
  }


  /*
   * Если внутри панели есть grid,
   * он занимает свободную высоту равномерно.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > div {

    min-height:
      0
      !important;
  }


  /*
   * Текст в карточках средней области:
   * выравнивание по вертикали аккуратнее.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article {

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article
  > div {

    align-self:
      center
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article h3,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article strong {

    margin-top:
      0
      !important;

    margin-bottom:
      5px
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article p,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article small {

    margin-top:
      0
      !important;

    margin-bottom:
      0
      !important;
  }


  /* ==========================================================
     4. BOTTOM STRIP — SLIGHTLY THINNER
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(4) {

    height:
      62px
      !important;

    min-height:
      62px
      !important;

    max-height:
      62px
      !important;

    margin:
      0
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(4)
  article {

    height:
      60px
      !important;

    min-height:
      60px
      !important;

    padding-top:
      6px
      !important;

    padding-bottom:
      6px
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(4)
  svg {

    max-width:
      28px
      !important;

    max-height:
      28px
      !important;
  }


  /* ==========================================================
     KEEP EVERYTHING INSIDE VIEWPORT
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(1),

  #screen-api
  .api-page-v38
  > :nth-child(2),

  #screen-api
  .api-page-v38
  > :nth-child(3),

  #screen-api
  .api-page-v38
  > :nth-child(4) {

    overflow:
      hidden
      !important;
  }

}

/* NX DEV ROW BALANCE V54 END */