/*
 * Phase 1 home refresh
 * First deliberate redesign pass for:
 * - topbar rhythm
 * - guest auth card
 * - bases empty state
 * - promo card
 * - first screen panels on home
 *
 * This file is intentionally override-only and loaded after the legacy split.
 */

@media (min-width: 1180px){
  body.page-home{
    --topline-box-h: 110px;
  }

  body.page-home .topbar{
    background:
      linear-gradient(180deg, rgba(8,10,14,.74), rgba(8,10,14,.56));
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 18px 46px rgba(0,0,0,.18);
  }

  body.page-home .topline{
    padding-top: 10px;
    padding-bottom: 12px;
  }

  body.page-home .brand{
    border-radius: 18px;
  }

  body.page-home .topCenter{
    grid-template-columns: clamp(150px, 12vw, 170px) minmax(0, 1fr) clamp(236px, 20vw, 292px);
    gap: 10px;
  }

  body.page-home .topCenter > .headerRadioMini,
  body.page-home .headerRailBases,
  body.page-home .headerRailPromo,
  body.page-home .topRight .profileWidget{
    border-radius: 18px;
  }

  body.page-home .topCenter > .headerRadioMini{
    padding: 10px 11px;
    background:
      radial-gradient(140% 140% at 100% 0%, rgba(240,140,40,.08), rgba(240,140,40,0) 46%),
      linear-gradient(180deg, rgba(23,20,18,.94), rgba(16,16,18,.98));
  }

  body.page-home .topCenter > .headerRadioMini .headerRadioMini__top{
    gap: 8px;
  }

  body.page-home .topCenter > .headerRadioMini .headerRadioMini__badge{
    padding: 4px 7px;
    font-size: 8px;
    letter-spacing: .08em;
  }

  body.page-home .topCenter > .headerRadioMini .headerRadioMini__simpleTitle{
    font-size: 12px;
    letter-spacing: .06em;
  }

  body.page-home .topCenter > .headerRadioMini .headerRadioMini__miniToggle{
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  body.page-home .headerRailBases{
    padding: 10px 12px 12px;
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.035), rgba(255,255,255,0) 44%),
      linear-gradient(180deg, rgba(12,14,18,.94), rgba(12,13,16,.98));
  }

  body.page-home .headerRailBases .railHead{
    margin-bottom: 8px;
  }

  body.page-home .headerRailBases .railTitle,
  body.page-home .headerRailBases .railMore{
    line-height: 1;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty{
    flex-basis: 100%;
    max-width: 100%;
    min-height: 76px;
    padding: 13px 16px;
    border-radius: 16px;
    background:
      radial-gradient(160% 140% at 0% 0%, rgba(240,140,40,.09), rgba(240,140,40,0) 48%),
      linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.022));
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide__icon{
    width: 36px;
    height: 36px;
    border-radius: 13px;
    font-size: 17px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide{
    gap: 4px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide__title{
    font-size: 14px;
    line-height: 1.14;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide__hint{
    font-size: 11px;
    line-height: 1.28;
    color: rgba(231,237,243,.64);
    -webkit-line-clamp: 2;
  }

  body.page-home .headerRailPromo{
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(18,14,12,.94), rgba(14,12,12,.98));
  }

  body.page-home .headerRailPromo .railBody{
    border-radius: inherit;
    overflow: hidden;
  }

  body.page-home .headerRailPromo .railScroller--promo{
    overflow-x: hidden;
    overflow-y: hidden;
  }

  body.page-home .headerRailPromo .railTrack{
    gap: 0;
  }

  body.page-home .headerRailPromo .railSlide--promo,
  body.page-home .headerRailPromo .railSlide--promoEmpty{
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  body.page-home .railScroller--promo .railSlide--promo,
  body.page-home .railScroller--promo .railSlide--promoEmpty{
    border-radius: 18px;
  }

  body.page-home .railScroller--promo .promoOverlay{
    left: 14px;
    right: 14px;
    bottom: 12px;
    gap: 5px;
  }

  body.page-home .railScroller--promo .promoTitle{
    max-width: 18ch;
    font-size: 13px;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest{
    min-height: var(--topline-box-h);
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text"
      "icon action";
    column-gap: 13px;
    row-gap: 4px;
    align-items: center;
    background:
      radial-gradient(140% 140% at 0% 0%, rgba(240,140,40,.08), rgba(240,140,40,0) 48%),
      linear-gradient(180deg, rgba(14,14,18,.94), rgba(12,12,16,.98));
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileGuestIcon{
    grid-area: icon;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 23px;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetBody{
    display: contents;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetHeaderRow{
    grid-area: title;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetName{
    font-size: 15px;
    line-height: 1.1;
    font-weight: 900;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetSteamId--guest{
    grid-area: text;
    font-size: 11px;
    line-height: 1.35;
    opacity: .82;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 28ch;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetActions{
    grid-area: action;
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
  }

  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetActions .btn{
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
  }

  body.page-home .navline{
    padding-top: 8px;
    padding-bottom: 10px;
    background:
      linear-gradient(180deg, rgba(12,12,14,.48), rgba(10,10,12,.38));
    border-top: 1px solid rgba(255,255,255,.03);
  }

  body.page-home .nav{
    gap: 10px;
  }

  body.page-home .navLink{
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.03);
  }

  body.page-home .sitePanel{
    border-radius: 20px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 46%),
      linear-gradient(180deg, rgba(20,22,28,.86), rgba(14,16,22,.90));
    box-shadow:
      0 22px 42px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  body.page-home .sitePanel__head{
    padding: 14px 16px 12px;
  }

  body.page-home .sitePanel__head .h1{
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.01em;
  }

  body.page-home .sitePanel__head .hint{
    margin-top: 4px;
    max-width: 44ch;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(231,237,243,.68);
  }

  body.page-home .sitePanel .panel-body{
    padding: 14px;
  }

  body.page-home .sitePanel--webchat .panel-body{
    padding: 12px;
  }

  body.page-home .sitePanel--webchat .webchat__list{
    min-height: 430px;
  }

  body.page-home .sitePanel--news .newsGrid--home{
    gap: 14px;
  }

  body.page-home .sitePanel--news .newsGrid--home .newsCard{
    padding: 12px;
    border-radius: 20px;
  }
}

@media (max-width: 1179px){
  body.page-home .topRight .profileWidget.profileWidget--guest .profileWidgetSteamId--guest{
    max-width: none;
  }
}