/* Race Control, under the circuit. On a pit wall the message log sits beside
   the timing screen, and here it fills what was dead space below the map.

   Styled to match the Ferrari F1 placard and cockpit telemetry aesthetic:
   carbon texture background, Rosso Corsa flank, forward-rake aero tab,
   and calibrated status badges. */

.rc {
  margin-top: var(--sp-4);
  position: relative;
  background: #0B0E14;
  background-image:
    linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(11, 14, 20, 0.96) 38%, rgba(7, 9, 13, 0.98) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.rc-decor-strip {
  padding: 6px 12px 6px 14px;
  background: rgba(8, 10, 13, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rc-aero-tab {
  gap: 5px;
}

.rc-sub-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  color: #94A3B8;
  text-transform: uppercase;
}

.rc-inner {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 2px);
}

.rc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}
.rc-list::-webkit-scrollbar {
  display: none;
}

.rc-row {
  display: grid;
  grid-template-columns: 7.6em 6.2em 1fr;
  gap: var(--sp-3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.rc-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.rc-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.50rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--bone);
}

.rc-kind-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.rc-at {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.50rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #94A3B8;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 2px 6px;
  text-align: center;
  white-space: nowrap;
}

.rc-msg {
  color: #D6E2EA;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Authentic F1 status states */
.rc-row--yellow .rc-kind {
  color: #FFB800;
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.35);
}

.rc-row--clear .rc-kind,
.rc-row--active .rc-kind {
  color: #00E676;
  background: rgba(0, 230, 118, 0.12);
  border-color: rgba(0, 230, 118, 0.35);
}

.rc-row--steward .rc-kind,
.rc-row--track .rc-kind {
  color: var(--bone);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.rc-row--radio .rc-kind {
  color: #94A3B8;
  background: rgba(122, 138, 150, 0.12);
  border-color: rgba(122, 138, 150, 0.30);
}

@media (max-width: 899px) {
  .rc {
    margin-top: var(--sp-4);
    border-radius: 6px;
  }
  .rc-list { max-height: none; }
  .rc-row {
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: baseline;
  }
  .rc-at {
    display: none;
  }
}
@media (max-width: 480px) {
  .rc-inner {
    padding: var(--sp-2) var(--sp-3);
  }
  .rc-row {
    padding: 4px 6px;
    font-size: 0.52rem;
  }
  .rc-kind {
    font-size: 0.48rem;
    padding: 1px 4px;
  }
}
