/*
 * Planner pitch in the same design as the shareable squad image: a flat
 * striped pitch, big kits, a dark name plate and a fixture/xPts plate.
 * Only looks change here; the cards keep every click, state and menu.
 */
@layer kft-studio {
  .kft-page-planner #mgrBar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 24px;
    padding: 16px !important;
  }
  .kft-page-planner #mgrBar .mgr-left { grid-column: 1; grid-row: 1; }
  .kft-page-planner #mgrBar .mgr-center {
    grid-column: 2;
    grid-row: 1 / 3;
    align-items: flex-end !important;
    justify-content: center;
    gap: 4px !important;
  }
  .kft-page-planner #mgrBar .mgr-right {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0 12px !important;
  }
  .kft-page-planner #mgrBar .mgr-team {
    order: -1;
    max-width: 100%;
    color: var(--kft-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-align: left !important;
  }
  .kft-page-planner #mgrBar .mgr-name { font-weight: 650; }
  .kft-page-planner #mgrBar .mgr-xpts {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    color: var(--kft-floodlight);
    white-space: nowrap;
  }
  .kft-page-planner #mgrBar .mgr-xpts > span {
    color: var(--kft-muted);
    font-size: 11px;
    font-weight: 500;
  }
  .kft-page-planner #mgrBar .mgr-cap { text-align: right; }
  .kft-page-planner #mgrBarXpts {
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .kft-page-planner #mgrBar .hide-xpts-toggle {
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 44px;
    font-size: 11px;
  }
}

html:root body.kft-page-planner #plan #planSquadInner {
  --pp-night: #111313;
  --pp-panel: #202323;
  --pp-line: #313736;
  --pp-ink: #f0f1ed;
  --pp-muted: #adb3af;
  --pp-accent: #e36169;
  --pp-mark: rgba(240, 241, 237, .13);
  --pp-row-gap: 6px;
  --pp-side-padding: 26px;
  position: relative;
  width: 100% !important;
  max-width: 940px;
  min-height: 0;
  margin: 0 auto !important;
  padding: 34px var(--pp-side-padding) 0 !important;
  overflow: hidden;
  border: 1px solid var(--pp-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220'%3E%3Cg fill='none' stroke='rgba(240,241,237,.13)' stroke-width='2'%3E%3Cpath d='M1 0V150H399V0'/%3E%3Cpath d='M104 0V54H296V0'/%3E%3Cpath d='M138 150A62 62 0 0 0 262 150'/%3E%3C/g%3E%3C/svg%3E") top 14px center / min(54%, 430px) auto no-repeat,
    repeating-linear-gradient(180deg, #16211b 0 70px, #19261f 70px 140px) !important;
}
/* Touchline frame; the bench strip covers its lower end like a halfway line. */
html:root body.kft-page-planner #plan #planSquadInner::before {
  content: '';
  position: absolute;
  inset: 14px 14px 0;
  border: 2px solid var(--pp-mark);
  border-bottom: 0;
  pointer-events: none;
  z-index: 0;
}

html:root body.kft-page-planner #plan #planSquadInner .pos-group-row { position: relative; z-index: 1; }
html:root body.kft-page-planner #plan #planSquadInner .pos-row {
  justify-content: space-around;
  width: 100%;
  gap: var(--pp-row-gap);
  margin-bottom: 22px;
}

/* Size every slot for the five-player row, regardless of its position. */
html:root body.kft-page-planner #plan #planSquadInner :is(.pcard, .pcard-blank) {
  flex: 0 0 min(156px, calc((100% - 4 * var(--pp-row-gap)) / 5));
  width: min(156px, calc((100% - 4 * var(--pp-row-gap)) / 5)) !important;
  min-width: 44px;
  max-width: 156px;
}

html:root body.kft-page-planner #plan #planSquadInner .pcard {
  padding: 0 3px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
}
html:root body.kft-page-planner #plan #planSquadInner .pcard .kft-kit {
  display: block;
  width: clamp(40px, 6.6vw, 66px) !important;
  height: auto !important;
  margin: 0 auto 6px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}
/* Captain marks sit on the kit's shoulder, as in the image. */
html:root body.kft-page-planner #plan #planSquadInner .cap-badge {
  top: -4px;
  right: auto;
  left: calc(50% + 20px);
  z-index: 2;
  width: 24px;
  height: 24px;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--pp-night);
}
html:root body.kft-page-planner #plan #planSquadInner .cap-badge.cap-c { background: var(--pp-ink); color: var(--pp-night); }
html:root body.kft-page-planner #plan #planSquadInner .cap-badge.cap-vc { background: var(--pp-panel); color: var(--pp-ink); }

html:root body.kft-page-planner #plan #planSquadInner .pcard-name-wrap {
  margin: 0 0 3px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--pp-night);
}
html:root body.kft-page-planner #plan #planSquadInner .pcard-name-wrap::after { left: 34%; right: 34%; bottom: 2px; height: 2px; }
html:root body.kft-page-planner #plan #planSquadInner .pcard-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pp-ink);
}
html:root body.kft-page-planner #plan #planSquadInner .pcard-bottom {
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--pp-panel);
}
html:root body.kft-page-planner #plan #planSquadInner .pcard-xpt-sep { display: none; }
html:root body.kft-page-planner #plan #planSquadInner .pcard-bottom .fixture-pill { font-size: 11px; }
html:root body.kft-page-planner #plan #planSquadInner .pcard-xpt-inline {
  font-size: 13px;
  font-weight: 800;
  color: var(--pp-accent);
}

/* Bench: its own dark strip under the pitch, like the image. */
html:root body.kft-page-planner #plan #planSquadInner .bench-group {
  width: auto !important;
  margin: 4px calc(-1 * var(--pp-side-padding)) 0;
  padding: 16px var(--pp-side-padding) 12px;
  background: var(--pp-night) !important;
  border-top: 1px solid var(--pp-line) !important;
}
html:root body.kft-page-planner #plan #planSquadInner .pcard.bench-pcard { opacity: .82; }
html:root body.kft-page-planner #plan #planSquadInner .bench-group .pos-row { margin-bottom: 0; }

@media (max-width: 600px) {
  html:root body.kft-page-planner #plan #planSquadInner {
    --pp-row-gap: 3px;
    --pp-side-padding: 12px;
    padding-top: 24px !important;
    border-radius: 14px !important;
    background-size: min(62%, 300px) auto, auto !important;
    background-position: top 10px center, 0 0 !important;
  }
  html:root body.kft-page-planner #plan #planSquadInner::before { inset: 10px 8px 0; }
  html:root body.kft-page-planner #plan #planSquadInner .pos-row { margin-bottom: 14px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard { padding: 0 1px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard .kft-kit { width: 40px !important; margin-bottom: 4px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard-name-wrap { padding: 4px 3px; border-radius: 6px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard-name { font-size: 10.5px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard-bottom { padding: 3px 4px; border-radius: 6px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard-bottom .fixture-pill { font-size: 9px; }
  html:root body.kft-page-planner #plan #planSquadInner .pcard-xpt-inline { font-size: 11px; }
  html:root body.kft-page-planner #plan #planSquadInner .cap-badge { top: -4px; left: calc(50% + 10px); width: 19px; height: 19px; font-size: 9px; }
  html:root body.kft-page-planner #plan #planSquadInner .bench-group { margin-top: 2px; padding-block: 12px 10px; }
}