/*
  Home viewport shell module.
  Extracted from the former modules/40-rails-bases-home.css; keep after 43-promo-rail.css.
*/

/* ------------------------------
   Home viewport alignment (desktop)
   UX target:
   - Main grid ends exactly at the bottom of the viewport.
   - Footer is BELOW the screen (reachable by scrolling the page).
   Implementation:
   - JS sets :root --home-header-h (measured height of header.topbar).
   - main.wrap height = 100vh - header height.
   - All scrolling remains inside panels.
   ------------------------------ */
@media (min-width: 981px){
  /* Let the document grow so the footer can sit below the fold */
  body.page-home{
    min-height: auto;
    display:block;
    --home-shell-gap: clamp(8px, .8vw, 12px);
    --home-panel-pad: clamp(10px, .9vw, 12px);
  }

  body.page-home.has-cookie-banner{
    padding-bottom: 0;
  }

  body.page-home main.wrap{
    /* JS measures the real top offset of <main> and provides the exact
       first-screen height so the home shell lands flush with the viewport
       bottom even if header rows wrap or their height changes. */
    height: max(420px, var(--home-main-h, calc(100dvh - var(--home-header-h, 0px))));
    min-height: 0;
    margin: 0 auto; /* keep centered max-width, remove outer gaps */
    padding: clamp(8px, 1vh, 12px) var(--page-pad-x) 0;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    overflow: hidden;
  }

  body.page-home main.wrap > .grid{
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: stretch;
    gap: var(--home-shell-gap);
    padding-bottom: calc(var(--cookie-banner-h, 0px) + 8px);
    box-sizing: border-box;
  }

  body.page-home .grid > section.stack,
  body.page-home .grid > aside.stack{
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.page-home .grid > aside.stack{
    display:grid;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: var(--home-shell-gap);
    align-content: stretch;
  }
  body.page-home .grid > aside.stack > .sitePanel + .sitePanel{ margin-top: 0; }

  body.page-home .homeMainGrid{
    height: 100%;
    min-height: 0;
    gap: var(--home-shell-gap);
    align-items: stretch;
    grid-template-columns: clamp(320px, 27vw, 410px) minmax(0, 1fr);
  }

  body.page-home .homeMainGrid > section.panel{ min-height: 0; display:flex; flex-direction:column; }

  /* By default, panel body scrolls internally on the first screen (news, etc.) */
  body.page-home .homeMainGrid > section.panel > .panel-body{ flex: 1 1 auto; min-height: 0; overflow:auto; }

  /* WebChat: keep panel body fixed, only the list scrolls (composer stays visible) */
  body.page-home .webchatPanel > .panel-body{ overflow:hidden; display:flex; flex-direction:column; min-height:0; }
  body.page-home .webchat{ flex: 1 1 auto; min-height: 0; height:100%; overflow:hidden; gap: 8px; }
  body.page-home .webchat__list{ flex: 1 1 auto; min-height: 0; height: auto; overflow:auto; padding: 8px; }
  body.page-home .webchat__composer{
    flex: 0 0 auto;
    padding: 9px 10px;
    display:grid;
    gap: 8px;
  }
  body.page-home .webchat__me{ min-width: 0; }
  body.page-home .webchatMeRow{ margin-bottom: 0; }
  body.page-home .webchatMeRow > div:last-child{ min-width: 0; }
  body.page-home .webchatMeName,
  body.page-home .webchatMeId{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.page-home .webchat__form{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
  body.page-home .webchat__field{
    min-width: 0;
  }
  body.page-home .webchat__input{
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 13px;
    font-size: 13px;
  }
  body.page-home .webchat__send{
    min-width: 122px;
    min-height: 40px;
    padding-inline: 15px;
  }
  body.page-home .webchat__status{ margin-top: 0; }

  /* Sidebar: monitoring panel grows, list scrolls */
  body.page-home aside.stack > section.panel:first-child{
    flex: 1 1 auto;
    min-height: 0;
    display:flex;
    flex-direction:column;
  }
  body.page-home aside.stack > section.panel:first-child > .panel-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.page-home .telemetryList{ flex: 1 1 auto; min-height: 0; overflow:auto; max-height:none; scrollbar-gutter: stable; overscroll-behavior: contain; margin-top: 8px; gap: 6px; }

  /* Home-only compact shell: preserve all blocks, but reduce vertical noise
     so the full first screen reaches the lower viewport edge more reliably. */
  body.page-home .topbar{ --topline-box-h: 124px; }
  body.page-home .topline{
    gap: 10px;
    padding: 8px var(--page-pad-x) 10px;
  }
  body.page-home .topCenter{
    gap: 10px;
    height: auto;
    min-height: var(--topline-box-h);
    align-items: stretch;
  }
  body.page-home .topRight{
    display: flex;
    align-self: stretch;
  }
  body.page-home .brand{
    width: 118px;
    height: auto;
    min-height: var(--topline-box-h);
  }
  body.page-home .navline{ padding: 6px var(--page-pad-x) 8px; }
  body.page-home .brand,
  body.page-home .headerRailBases,
  body.page-home .profileWidget{ border-radius: 14px; }
  body.page-home .logoSmall{ width: 56px; height: 56px; border-radius: 14px; }
  body.page-home .headerRailBases,
  body.page-home .headerRailPromo,
  body.page-home .profileWidget{
    height: auto;
    min-height: var(--topline-box-h);
    padding: 8px 10px;
  }
  body.page-home .railHead{ margin-bottom: 5px; }
  body.page-home .headerRailBasesShell{
    grid-template-columns: clamp(252px, 29%, 294px) minmax(0, 1fr);
    gap: 8px;
    min-height: 102px;
  }
  body.page-home .headerRadioMini,
  body.page-home .headerRailBasesStage{
    min-height: 102px;
  }
  body.page-home .headerRadioMini{
    padding: 10px;
    gap: 8px;
  }
  body.page-home .headerRadioMini__top{ gap: 8px; }
  body.page-home .headerRadioMini__badge{
    padding: 4px 8px;
    font-size: 10px;
  }
  body.page-home .headerRadioMini__listeners{ font-size: 11px; }
  body.page-home .headerRadioMini__main{ gap: 10px; }
  body.page-home .headerRadioMini__play{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 16px;
  }
  body.page-home .headerRadioMini__title{
    font-size: 13px;
    -webkit-line-clamp: 1;
  }
  body.page-home .headerRadioMini__ownerName{ font-size: 11px; }
  body.page-home .headerRadioMini__wave{
    height: 18px;
    gap: 4px;
  }
  body.page-home .headerRadioMini__actions{ gap: 6px; }
  body.page-home .headerRadioMini__vote,
  body.page-home .headerRadioMini__open{
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }
  body.page-home .headerRadioMini__status{
    min-height: 0;
    font-size: 11px;
  }
  body.page-home .headerRailBasesStage .railScroller--bases .railSlide{
    min-height: 102px;
    padding: 9px 10px;
    gap: 10px;
  }
  body.page-home .headerRailBasesStage .railScroller--bases .baseCover{
    width: clamp(96px, 26%, 122px);
    height: 80px;
  }
  body.page-home .headerRailBasesStage .railScroller--bases .railTitle{
    font-size: 13px;
  }
  body.page-home .headerRailBasesStage .railScroller--bases .baseCounts{
    gap: 6px 10px;
    font-size: 11px;
  }
  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty{
    min-height: 100%;
  }
  body.page-home .profileAvatarLarge{ width: 56px; height: 56px; border-radius: 12px; }
  body.page-home .profileWidgetBody{ gap: 5px; }
  body.page-home .profileWidgetMetrics{ gap: 6px; }
  body.page-home .profileWidgetMetrics .metric,
  body.page-home .profileWidgetMetrics > .notifBell > .notifBellBtn{
    min-height: 22px;
    padding: 2px 7px;
    font-size: 11px;
  }
  body.page-home .profileWidgetActions{ gap: 6px; margin-top: 0; }
  body.page-home .profileWidgetActions > .btn,
  body.page-home .profileWidgetActions > a.btn,
  body.page-home .profileWidgetActions > .notifBell > .notifBellBtn{
    min-height: 28px;
    padding: 5px 9px;
    font-size: 11px;
  }

  body.page-home .sitePanel__head,
  body.page-home .panel-head{
    gap: 10px;
    padding: 11px 14px;
  }
  body.page-home .sitePanel .panel-body{ padding: var(--home-panel-pad); }
  body.page-home aside.stack > .sitePanel > .panel-body{ padding: 10px; }
  body.page-home .sitePanel__head .h1{ font-size: 17px; margin: 0; }
  body.page-home .sitePanel__head .hint{ margin-top: 4px; font-size: 12px; line-height: 1.35; }
  body.page-home .panel-title{ font-size: 14px; }
  body.page-home .panel__actions{ gap: 8px; }
  body.page-home .btn,
  body.page-home .btn-primary,
  body.page-home .btn-ghost{
    min-height: 34px;
    padding: 8px 11px;
    font-size: 12px;
  }
  body.page-home #monitor-refresh,
  body.page-home #eco-refresh{ padding: 6px 9px; }
  body.page-home .monitorActions{ gap: 8px; margin-top: 10px; }
  body.page-home .monitorActions .btn-primary,
  body.page-home .monitorActions .btn-ghost{ flex-basis: 150px; }
  body.page-home .telemetryHead{ margin-top: 0; }
  body.page-home .telemetryRow{ padding: 7px 8px; border-radius: 12px; }
  body.page-home .telemetryList{ gap: 5px; }
  body.page-home .homeActionsPanel{ min-height: 0; }
  body.page-home .homeActionsPanel > .panel-body{
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
  }
  body.page-home .homeActionsList > .btn-ghost{
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.page-home .sitePanel--news > .panel-body{ overflow: hidden; }
  body.page-home .sitePanel--news .newsGrid--home{ gap: 10px; }
  body.page-home .sitePanel--news .newsGrid--home .newsCard{
    padding: 9px;
    gap: 10px;
    border-radius: 16px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__cover{
    flex-basis: clamp(184px, 20vw, 242px);
    max-width: clamp(184px, 20vw, 242px);
    border-radius: 12px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__coverMeta{
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__badge,
  body.page-home .sitePanel--news .newsGrid--home .newsCard__datePill{
    min-height: 24px;
    padding-inline: 8px;
    font-size: 10px;
  }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__body{ gap: 7px; }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__title{ font-size: clamp(16px, .98vw, 18px); }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__text{ line-height: 1.35; }
  body.page-home .sitePanel--news .newsGrid--home .newsCard__actions--compact .btn{
    min-height: 32px;
    padding-inline: 12px;
  }
}