/* Final Router viewport geometry.
   The shared header is 68px on desktop and 62px on compact layouts. */

.router-page .app {
  width: 100%;
  height: auto;
  min-height: calc(100dvh - 68px);
}

.router-page .hero {
  height: auto;
  min-height: calc(100dvh - 68px);
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: clamp(14px, 2.2vh, 22px);
  padding: clamp(20px, 3.2vh, 34px) 0;
}

.router-page .terminal {
  width: 100%;
  height: clamp(380px, 46dvh, 500px);
  min-height: 0;
  max-height: 500px;
}

.router-page .history {
  min-height: 0;
  max-height: none;
}

@media (max-width: 920px) {
  .router-page .app,
  .router-page .hero {
    min-height: calc(100dvh - 62px);
  }

  .router-page .terminal {
    height: clamp(410px, 56dvh, 570px);
    max-height: 570px;
  }
}

@media (max-width: 760px) {
  body.router-page {
    min-height: 100dvh;
    overflow-y: auto !important;
  }

  .router-page .app {
    min-height: calc(100dvh - 62px);
  }

  .router-page .hero {
    width: calc(100% - 20px);
    min-height: calc(100dvh - 62px);
    height: auto;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 14px;
    padding: clamp(16px, 2.8vh, 24px) 0 max(16px, env(safe-area-inset-bottom));
  }

  .router-page .terminal {
    height: clamp(390px, 60dvh, 520px);
    min-height: 0;
    max-height: 520px;
  }

  .router-page .history {
    min-height: 0;
    max-height: none;
  }

  body.coco-walk-active .hero {
    display: grid;
    min-height: calc(100dvh - 62px);
    align-content: center;
    padding: clamp(12px, 2vh, 20px) 0 max(12px, env(safe-area-inset-bottom));
  }

  body.coco-walk-active .terminal.is-coco-walk {
    height: clamp(430px, 74dvh, 620px);
    min-height: 0;
    max-height: 620px;
    grid-template-rows: 36px minmax(0, 1fr) auto;
    overflow: hidden;
  }

  body.coco-walk-active .terminal.is-coco-walk .term-top {
    position: static;
  }

  body.coco-walk-active .terminal.is-coco-walk .history {
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.coco-walk-active .terminal.is-coco-walk .composer {
    position: static;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  body.router-page {
    overflow-y: auto;
  }

  .router-page .hero {
    align-content: start;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .router-page .hero-title h1 {
    font-size: clamp(44px, 5.2vw, 64px);
  }

  .router-page .terminal {
    height: clamp(360px, 52dvh, 430px);
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .router-page .hero {
    align-content: start;
    gap: 10px;
    padding-top: 12px;
  }

  .router-page .hero-title h1 {
    font-size: clamp(38px, 11vw, 50px);
  }

  .router-page .terminal {
    height: 380px;
  }
}