lila/ui/analyse/css/_layout.scss

$analyse-block-gap: $block-gap;

body {
  /* prevents scroll bar flicker on page height changes */
  overflow-y: scroll;
}

#main-wrap {
  ---main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});

  @include mq-at-least-col2 {
    ---main-max-width: auto;
  }
}

.analyse {
  grid-area: main;
  display: grid;

  &__side {
    grid-area: side;
    justify-content: start;
  }

  &__board {
    grid-area: board;

    cg-container {
      @include inline-end(0);
    }
  }

  &__tools {
    grid-area: tools;
  }

  &__controls {
    grid-area: controls;
  }

  &__underboard {
    grid-area: under;

    @include mq-is-col1 {
      overflow: hidden; // helps truncating long study names
    }
  }

  &__round-training {
    grid-area: round-training;
  }

  &__puzzle {
    grid-area: puzzle;
  }

  .chat__members {
    grid-area: uchat;
  }

  .eval-gauge {
    grid-area: gauge;
    display: none;
  }

  .keyboard-move {
    display: none;
  }

  ---chat-height: fit-content(0);

  &--wiki {
    ---chat-height: 0;
  }

  .mchat {
    margin: $analyse-block-gap 0 0 0;
  }

  grid-template-rows: auto auto auto minmax(20em, 40vh);
  grid-template-areas:
    'board'
    'controls'
    'kb-move'
    'tools'
    'side'
    'round-training'
    'under'
    'chat'
    'uchat';

  @include mq-at-least-col2 {
    grid-template-columns: var(---col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
    grid-template-rows: fit-content(0);
    grid-template-areas:
      'board      gauge tools'
      'kb-move    .     controls'
      'under      .     controls'
      'under      .     round-training'
      'under      .     side'
      'chat       .     side'
      'uchat      .     side';
    row-gap: 0;

    &__side {
      margin: $analyse-block-gap 0 0 0;
    }

    .chat__members {
      margin: calc($analyse-block-gap / 2) 0 0 0;
    }

    &__underboard {
      margin-top: $analyse-block-gap;
    }

    .eval-gauge {
      display: block;
    }

    .keyboard-move {
      display: block;
      grid-area: kb-move;
      margin: $analyse-block-gap;
      margin: calc($analyse-block-gap / 2) 0 0 0;
    }
  }

  @include mq-is-col2-squeeze {
    grid-template-columns: $col2-uniboard-squeeze-width $analyse-block-gap $col2-uniboard-squeeze-table;
  }

  @include mq-at-least-col3 {
    grid-template-columns:
      $col3-uniboard-side $analyse-block-gap var(---col3-uniboard-width)
      $analyse-block-gap $col3-uniboard-table;
    grid-template-rows: auto $chat-height auto 2.5em 1fr;
    grid-template-areas:
      'side    . board   gauge tools'
      'chat    . board   gauge tools'
      'uchat   . kb-move .     controls'
      'uchat   . under   .     controls'
      'uchat   . under   .     round-training';

    &__side {
      margin-top: 0;
    }

    .mchat {
      margin-top: 0;
      min-height: 10em;
    }

    @include crosstable-large;
  }
}

.blind-mode .analyse {
  display: block;
}