/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Final topbar, radio and authenticated header polish overrides
 * Source lines: 25804-26904
 */

/* Final polish for the authenticated profile card in the home topbar:
   give action buttons enough room and slightly rebalance promo/profile widths. */
@media (min-width: 1180px){
  body.page-home .topline{
    grid-template-columns: 104px minmax(0, 1fr) minmax(334px, 360px);
    gap: 10px;
  }

  body.page-home .topCenter{
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
    gap: 10px;
  }

  body.page-home .headerRailPromo{
    flex: 0 0 clamp(250px, 23vw, 410px);
    max-width: 410px;
  }

  body.page-home .topRight{
    min-width: clamp(334px, 20vw, 360px);
    max-width: clamp(334px, 20vw, 360px);
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest){
    padding: 9px 11px;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileAvatarLarge{
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetHeaderRow{
    gap: 6px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics{
    gap: 5px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics .metric,
  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics > .notifBell > .notifBellBtn{
    min-height: 21px;
    padding: 2px 6px;
    font-size: 10px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 1px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .btn,
  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > a.btn,
  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .notifBell > .notifBellBtn{
    min-height: 29px;
    padding: 4px 7px;
    font-size: 10.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =========================================================
   Radio page and simplified top radio widget
   ========================================================= */
.headerRadioMini{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  height: auto;
  padding: 8px 10px;
}

.headerRadioMini__top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.headerRadioMini__badge{
  flex: 0 0 auto;
}

.headerRadioMini__summary--simple{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.headerRadioMini__summary--simple .headerRadioMini__eyebrow,
.headerRadioMini__summary--simple .headerRadioMini__title,
.headerRadioMini__summary--simple .headerRadioMini__ownerLine{
  display: none;
}

.headerRadioMini__simpleTitle{
  margin: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.headerRadioMini__simpleState{
  display: none;
}

.headerRadioMini__miniToggle{
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .16s ease;
}

.headerRadioMini:hover .headerRadioMini__miniToggle,
.headerRadioMini:focus-visible .headerRadioMini__miniToggle,
.headerRadioMini__miniToggle:hover{
  border-color: rgba(240,140,40,.28);
  background: rgba(240,140,40,.12);
  color: #fff;
}

.headerRadioMini.is-playing .headerRadioMini__miniToggle{
  border-color: rgba(240,140,40,.34);
  background: rgba(240,140,40,.16);
}

/* Compact top radio pill */
body.page-home .headerRailBasesShell{
  grid-template-columns: clamp(168px, 22%, 196px) minmax(0, 1fr);
}

body.page-home .headerRadioMini{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  gap: 8px;
  border-radius: 13px;
}

body.page-home .headerRadioMini__top{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.page-home .headerRadioMini__badge{
  flex: 0 0 auto;
  padding: 4px 7px;
  font-size: 9px;
  letter-spacing: .08em;
}

body.page-home .headerRadioMini__miniToggle{
  width: 30px;
  height: 30px;
  margin-left: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .16s ease;
}

body.page-home .headerRadioMini:hover .headerRadioMini__miniToggle,
body.page-home .headerRadioMini:focus-visible .headerRadioMini__miniToggle,
body.page-home .headerRadioMini__miniToggle:hover{
  border-color: rgba(240,140,40,.28);
  background: rgba(240,140,40,.12);
  color: #fff;
}

body.page-home .headerRadioMini__summary--simple{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

body.page-home .headerRadioMini__simpleTitle{
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-home .headerRadioMini__simpleState{
  display: none;
}

body.page-home .headerRadioMini.is-playing .headerRadioMini__miniToggle{
  border-color: rgba(240,140,40,.34);
  background: rgba(240,140,40,.16);
}

@media (max-width: 1180px){
  body.page-home .headerRailBasesShell{
    grid-template-columns: minmax(164px, 184px) minmax(0, 1fr);
  }
}

@media (max-width: 900px){
  body.page-home .headerRailBasesShell{
    grid-template-columns: 1fr;
  }

  body.page-home .headerRadioMini{
    min-height: 64px;
  }
}

/* Final topbar layout:
   radio lives as a separate card, bases stay independent, and the right profile
   gets a stable 2x2 action grid without button overflow. */
.headerRailBasesShell{
  display: block;
  min-height: 0;
}

@media (min-width: 1180px){
  .topline{
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) clamp(356px, 21vw, 396px);
    gap: 12px;
    align-items: stretch;
  }

  .topCenter{
    display: grid;
    grid-template-columns: clamp(172px, 14vw, 194px) minmax(0, 1fr) clamp(286px, 25vw, 350px);
    gap: 12px;
    min-width: 0;
    flex: none;
    margin-left: 0;
  }

  .topRight{
    width: 100%;
    min-width: 0;
    margin-left: 0;
    display: flex;
    align-self: stretch;
  }

  .topRight > .profileWidget{
    width: 100%;
  }

  .headerRailBases,
  .headerRailPromo,
  .topCenter > .headerRadioMini{
    min-height: var(--topline-box-h, 104px);
    border-radius: 16px;
  }

  .topCenter > .headerRadioMini{
    padding: 10px 12px;
    align-content: center;
    background:
      radial-gradient(130% 130% at 100% 0%, rgba(240,140,40,.12), rgba(240,140,40,0) 48%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    box-shadow:
      0 14px 34px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

  .topCenter > .headerRadioMini .headerRadioMini__top{
    gap: 8px;
  }

  .topCenter > .headerRadioMini .headerRadioMini__badge{
    padding: 4px 8px;
    font-size: 10px;
  }

  .topCenter > .headerRadioMini .headerRadioMini__simpleTitle{
    font-size: 13px;
    letter-spacing: .08em;
  }

  .topCenter > .headerRadioMini .headerRadioMini__miniToggle{
    width: 32px;
    height: 32px;
  }

  .headerRailBases{
    padding: 9px 12px 11px;
  }

  .headerRailBasesStage{
    height: calc(100% - 28px);
  }

  .headerRailPromo{
    max-width: none;
  }

  .topRight .profileWidget:not(.profileWidget--guest){
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "avatar head"
      "avatar meta"
      "actions actions";
    column-gap: 11px;
    row-gap: 4px;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileAvatarLarge{
    grid-area: avatar;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    align-self: start;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetBody{
    display: contents;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetHeaderRow{
    grid-area: head;
    gap: 6px;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetName{
    font-size: 13px;
    line-height: 1.1;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetSteamId{
    grid-area: meta;
    font-size: 10px;
    line-height: 1.1;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics{
    gap: 5px;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics .metric,
  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetMetrics > .notifBell > .notifBellBtn{
    min-height: 22px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions{
    grid-area: actions;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 2px;
  }

  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .btn,
  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > a.btn,
  .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .notifBell > .notifBellBtn{
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1.1;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 901px) and (max-width: 1179px){
  .topCenter{
    display: grid;
    grid-template-columns: clamp(164px, 20vw, 182px) minmax(0, 1fr);
    gap: 10px;
  }

  .topCenter > .headerRadioMini{
    min-height: 88px;
  }

  .headerRailPromo{
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* Home topbar final composition:
   radio is its own card; bases and promo form the second column stack;
   profile gets a little more room so action buttons do not spill out. */
@media (min-width: 1180px){
  body.page-home .topline{
    grid-template-columns: 96px minmax(0, 1fr) clamp(320px, 19.5vw, 360px);
    gap: 12px;
  }

  body.page-home .topCenter{
    display: grid;
    grid-template-columns: clamp(148px, 12vw, 168px) minmax(0, 1fr) clamp(228px, 20vw, 284px);
    gap: 8px;
    align-items: stretch;
    min-height: var(--topline-box-h, 118px);
  }

  body.page-home .topCenter > .headerRadioMini{
    min-height: var(--topline-box-h, 118px);
    height: auto;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: start;
    align-content: start;
  }

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

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

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

  body.page-home .topCenter > .headerRadioMini .headerRadioMini__miniToggle{
    width: 28px;
    height: 28px;
  }

  body.page-home .headerRailBases{
    min-height: var(--topline-box-h, 118px);
    padding: 9px 10px 10px;
  }

  body.page-home .headerRailBasesStage{
    height: calc(100% - 28px);
    min-height: 0;
  }

  body.page-home .headerRailBasesStage .railBody,
  body.page-home .headerRailBasesStage .railScroller--bases,
  body.page-home .headerRailBasesStage .railTrack{
    height: 100%;
    min-height: 0;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide{
    padding: 10px 12px;
    gap: 14px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .baseCover{
    width: clamp(98px, 25%, 122px);
    height: 74px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .baseInfo{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 6px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railTitle{
    font-size: 13px;
    line-height: 1.18;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSub{
    font-size: 11px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .baseCounts{
    gap: 6px 11px;
    font-size: 11px;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty{
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    padding: 12px 14px;
    align-items: center;
  }

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide{
    align-content: center;
    justify-items: start;
    text-align: left;
    gap: 3px;
    min-height: 0;
  }

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

  body.page-home .headerRailBasesStage .railScroller--bases .railSlide--empty .emptySlide__hint{
    max-width: none;
    font-size: 10px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.page-home .headerRailPromo{
    min-height: var(--topline-box-h, 118px);
    padding: 0;
    max-width: none;
    align-self: stretch;
  }

  body.page-home .headerRailPromo .railBody,
  body.page-home .headerRailPromo .railScroller--promo,
  body.page-home .headerRailPromo .railTrack,
  body.page-home .headerRailPromo .railSlide--promo,
  body.page-home .headerRailPromo .railSlide--promoEmpty{
    height: 100%;
    min-height: 0;
  }

  body.page-home .headerRailPromo .railBody{
    display: block;
    overflow: hidden;
  }

  body.page-home .topRight{
    min-width: 0;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest){
    padding: 10px 12px;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 11px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .btn,
  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > a.btn,
  body.page-home .topRight .profileWidget:not(.profileWidget--guest) .profileWidgetActions > .notifBell > .notifBellBtn{
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11px;
  }
}