/* Dirt Rivals web beta: official branding and planning-status indicators. */
.brand { gap: 12px; }
.brand-logo {
  display: block;
  width: clamp(190px, 22vw, 245px);
  height: auto;
  flex: 0 0 auto;
  padding: 5px 7px;
  background: #ffffff;
  border-radius: 8px;
}
.brand-copy small { font-size: 10px; letter-spacing: 1px; }
.hero-graphic {
  display: flex;
  align-items: center;
  right: -55px;
  top: 0;
  opacity: .23;
  transform: rotate(-12deg);
}
.hero-graphic .speed-lines {
  width: 450px;
  height: 42px;
  margin: 0;
  border-top: 6px solid #80baff;
  border-bottom: 6px solid #80baff;
  background: transparent;
}
.driver-main { min-width: 0; }
.driver-name-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.driver-name-line .driver-name { min-width: 0; }
.attendance-square {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.42);
  vertical-align: middle;
}
.attendance-here { background: #218bf5; box-shadow: 0 0 7px #218bf580; }
.attendance-unconfirmed { background: #f19a31; box-shadow: 0 0 7px #f19a314d; }
.attendance-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 19px;
  margin: 13px 0 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #b9d1ec;
}
.attendance-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.attendance-note { font-size: 11px; color: #96abc6; margin: 0 0 14px; }
@media(max-width:660px) {
  .brand-logo { width: 172px; padding: 3px 5px; }
  .brand-copy { display: none; }
  .attendance-legend { gap: 8px 14px; font-size: 9px; }
}

.broadcast-return{display:inline-flex;align-items:center;text-decoration:none;color:#d6e9ff;border:1px solid #2d527d;border-radius:6px;padding:8px 11px;font-weight:800;font-size:11px;letter-spacing:.04em;white-space:nowrap}.broadcast-return:hover{border-color:#459dff;color:white}@media(max-width:760px){.broadcast-return{font-size:10px;padding:6px 8px}}



/* Draft view only: keep the TEAM ROSTER and MY ACCOUNT cards together.
   The original first-card-only sticky positioning covered the account card.
   Pin the entire sidebar instead; the team can scroll *inside* it on shorter screens
   while the account card remains visible underneath. */
.mobile-team-strip { display: none; }
@media (min-width: 661px) {
  .layout:has(#driverList) {
    align-items: stretch;
  }
  .layout:has(#driverList) > .side-col {
    position: sticky;
    top: clamp(12px, 5vh, 42px);
    align-self: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: calc(100dvh - clamp(12px, 5vh, 42px) - 14px);
    gap: 12px;
    overflow: hidden;
  }
  .layout:has(#driverList) > .side-col > .panel {
    position: static; /* cancel old sticky first-card rule */
    margin-top: 0;
  }
  .layout:has(#driverList) > .side-col > .panel:first-child {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #365d85 #102037;
  }
  .layout:has(#driverList) > .side-col > .panel:not(:first-child) {
    flex: 0 0 auto;
    overflow: visible;
  }
  /* Leave more space for the account card, without squashing roster controls. */
  .layout:has(#driverList) > .side-col .panel { padding: 17px; }
  .layout:has(#driverList) > .side-col .selected-pick { padding: 7px 0; }
  .layout:has(#driverList) > .side-col .metric-line { padding: 6px 0; }
}
@media (max-width: 660px) {
  /* Avoid pinning two full-size cards over the driver's list on mobile.
     The compact summary remains visible and now includes the account name. */
  .mobile-team-strip {
    position: sticky;
    top: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid #4891d5;
    background: #102c4a;
    box-shadow: 0 5px 20px #0008;
  }
  .mobile-team-strip-title { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
  .mobile-team-strip-credits { font-size: 19px; font-weight: 1000; color: #b9e0ff; }
  .mobile-team-strip-credits.bad { color: var(--bad); }
  .mobile-team-strip-credits small { font-size: 10px; }
  .mobile-team-strip-roster { margin-left: auto; color: #b9d5f1; font-size: 11px; font-weight: 900; white-space: nowrap; }
  .mobile-team-strip-account { width: 100%; color: #8fc2ee; font-size: 10px; font-weight: 850; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}