/*
 * Feature surface hierarchy
 *
 * Squads, Trades, Events and Console grew independently. This late ownership
 * layer gives them one spacing, border and card language without changing any
 * of their data, routing or interactive behaviour.
 */

:root {
  --feature-radius: 14px;
  --feature-gap: 16px;
  --feature-border: color-mix(in srgb, var(--st-border) 82%, transparent);
  --feature-fill: color-mix(in srgb, var(--st-surface-2) 84%, transparent);
  --feature-fill-soft: color-mix(in srgb, var(--st-surface-2) 54%, transparent);
}

#parties,
#trades,
#events,
#console {
  --cohesion-radius-panel: var(--feature-radius);
}

#parties > .hero,
#trades > .hero,
#events > .hero,
#console > .console-page-intro {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--feature-border);
}

#parties > .hero p,
#trades > .hero p,
#console > .console-page-intro p {
  max-width: 66ch;
}

#parties .panel,
#trades .panel,
#events .panel,
#events .event-card-v2,
#events .event-list-card,
#console .fortnite-command-console,
#console .console-code {
  border-color: var(--feature-border);
  border-radius: var(--feature-radius);
  background-color: var(--feature-fill);
  background-image: none;
  box-shadow: none;
}

#parties .panel,
#trades .panel,
#events .panel {
  padding: 20px;
}

#parties .panel h3,
#trades .panel h3,
#events .panel h3 {
  margin-top: 5px;
  letter-spacing: -.018em;
}

/* Squads */
#parties .party-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--feature-border);
  border-radius: 12px;
  background: var(--feature-border);
}

#parties .party-feature-strip > * {
  min-height: 62px;
  padding: 11px 12px;
  border: 0;
  border-radius: 0;
  background: var(--feature-fill-soft);
  box-shadow: none;
}

#parties #partySignedOut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: center;
}

#parties #partySignedOut h3,
#parties #partySignedOut p {
  grid-column: 1;
}

#parties #partySignedOut p {
  margin-bottom: 0;
}

#parties #partySignedOut .btn {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 142px;
}

#parties .party-layout {
  grid-template-columns: minmax(310px, .82fr) minmax(0, 1.35fr);
  gap: var(--feature-gap);
  margin-top: var(--feature-gap);
}

#parties .party-stack,
#parties .party-list,
#parties .party-member-list {
  gap: 10px;
}

#parties .party-card,
#parties .party-member,
#parties .party-empty {
  border-color: var(--feature-border);
  border-radius: 11px;
  background: var(--feature-fill-soft);
  box-shadow: none;
}

#parties .party-card.active {
  border-color: color-mix(in srgb, var(--st-cyan) 46%, var(--feature-border));
  background: color-mix(in srgb, var(--st-cyan) 9%, var(--feature-fill));
  box-shadow: inset 3px 0 0 var(--st-cyan);
}

/* Trades */
#trades .trade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: var(--feature-gap);
  align-items: start;
}

#trades .trade-layout > .panel {
  min-width: 0;
  margin: 0;
}

#trades .trade-builder .dashboard-card-head,
#trades .trade-layout > .panel > .dashboard-card-head {
  margin-bottom: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--feature-border);
}

#trades .trade-note {
  margin: 13px 0;
  padding: 10px 12px;
  border: 0;
  border-left: 3px solid var(--st-cyan);
  border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--st-cyan) 6%, transparent);
}

#trades .trade-form-grid {
  gap: 11px;
}

#trades .trade-drafts,
#trades .trade-builder {
  min-width: 0;
}

#trades .party-empty {
  border-color: var(--feature-border);
  border-radius: 11px;
  background: var(--feature-fill-soft);
}

/* Events */
#events > .hero + .panel {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 7px 16px;
}

#events > .hero + .panel > .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

#events > .hero + .panel > .input {
  grid-column: 2;
  grid-row: 1;
}

#events > .hero + .panel > .sub {
  grid-column: 2;
  min-height: 0;
}

#events .event-v2-controls {
  margin: 12px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--feature-border);
  border-radius: 12px;
  background: var(--feature-fill-soft);
  box-shadow: none;
}

#events .event-cards,
#events #eventList.list {
  display: grid;
  gap: 11px;
}

#events .event-card-v2,
#events .event-list-card {
  padding: 17px 18px;
}

#events .event-card-v2.live,
#events .event-list-card.live,
#events .event-card-v2.ongoing,
#events .event-list-card.ongoing {
  border-left: 4px solid var(--st-success);
}

#events .event-card-v2.upcoming,
#events .event-list-card.upcoming {
  border-left: 4px solid var(--st-cyan);
}

#events .event-card-v2.past,
#events .event-card-v2.ended,
#events .event-list-card.past,
#events .event-list-card.ended {
  border-left: 4px solid color-mix(in srgb, var(--st-muted) 56%, transparent);
  opacity: .82;
}

#events .event-time-grid {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--feature-border);
  border-radius: 10px;
  background: var(--feature-border);
}

#events .event-time-grid > * {
  border: 0;
  border-radius: 0;
  background: var(--feature-fill-soft);
}

#events .event-series-card {
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  align-items: start;
}

#events .event-series-card > .event-feature-image {
  grid-column: 1 / -1;
}

#events .event-series-copy > span {
  color: var(--st-cyan);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#events .event-series-sessions {
  display: grid;
  gap: 10px;
}

#events .event-series-intro,
#events .event-session-row {
  border: 1px solid var(--feature-border);
  border-radius: 12px;
  background: var(--feature-fill-soft);
}

#events .event-series-intro {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

#events .event-series-intro strong {
  color: var(--st-cyan);
  font-size: .72rem;
}

#events .event-series-intro small {
  color: var(--st-muted);
  font-size: .61rem;
  line-height: 1.4;
}

#events .event-session-row {
  display: grid;
  gap: 9px;
  padding: 11px;
}

#events .event-session-row > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#events .event-session-row > header span,
#events .event-session-row > header strong {
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#events .event-session-row > header span {
  color: var(--st-text);
}

#events .event-session-row > header strong {
  color: var(--st-cyan);
}

#events .event-session-row.live > header strong {
  color: var(--st-success);
}

#events .event-session-row.ended > header strong {
  color: var(--st-muted);
}

#events .event-session-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#events .event-session-times > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--feature-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--st-surface-2) 78%, transparent);
}

#events .event-session-times span {
  color: var(--st-muted);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#events .event-session-times strong {
  font-size: .66rem;
  line-height: 1.35;
}

#events .event-session-times small {
  color: var(--st-muted);
  font-size: .56rem;
}

#events .event-highlights {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding-left: 19px;
  color: var(--st-text);
  font-size: .73rem;
  line-height: 1.45;
}

#events .event-highlights li::marker {
  color: var(--st-cyan);
}

/* Console: keep its terminal identity, but remove stacked decorative layers. */
#console .fortnite-command-console {
  overflow: hidden;
  border-width: 1px !important;
  border-radius: var(--feature-radius) !important;
}

#console .console-scanline {
  opacity: .035;
}

#console .fortnite-command-console > header,
#console .fortnite-command-console > footer {
  border-color: var(--feature-border);
  background: var(--feature-fill-soft);
}

#console .console-prompt {
  min-height: 44px;
  margin: 16px 20px 0;
  border-color: var(--feature-border);
  background: color-mix(in srgb, var(--st-surface) 70%, transparent);
}

#console .console-toolbar {
  margin: 12px 20px 15px;
  padding: 0;
  border: 0;
  background: transparent;
}

#console .console-codes {
  gap: 9px;
  padding-inline: 20px;
}

#console .console-code {
  min-height: 86px;
  padding: 12px;
}

#console .console-code:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--st-cyan) 38%, var(--feature-border));
  background-color: color-mix(in srgb, var(--st-cyan) 5%, var(--feature-fill));
}

@media (max-width: 1100px) {
  #parties .party-layout,
  #trades .trade-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #events .event-series-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #parties .party-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #parties #partySignedOut {
    grid-template-columns: 1fr;
  }

  #parties #partySignedOut .btn {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }

  #events > .hero + .panel {
    grid-template-columns: 1fr;
  }

  #events > .hero + .panel > .eyebrow,
  #events > .hero + .panel > .input,
  #events > .hero + .panel > .sub {
    grid-column: 1;
    grid-row: auto;
  }

  #events .event-session-times {
    grid-template-columns: 1fr;
  }

  #console .console-prompt,
  #console .console-toolbar {
    margin-inline: 13px;
  }

  #console .console-codes {
    padding-inline: 13px;
  }
}

@media (max-width: 480px) {
  :root {
    --feature-radius: 12px;
    --feature-gap: 12px;
  }

  #parties .panel,
  #trades .panel,
  #events .panel {
    padding: 15px;
  }

  #parties .party-feature-strip {
    grid-template-columns: 1fr;
  }

  #events .event-card-v2,
  #events .event-list-card {
    padding: 14px;
  }
}