/* coach.css - see the Sept 20 polish pass. Loaded on every page after style.css. */

/* ===========================================================================
   THE COACH TOOLS, SIMPLER (Sept 20). The Pitch Planner and the defensive
   card as numbered steps in cards, one line of help each, the rulebook facts
   as figures and the long text folded away.
   =========================================================================== */
.plh{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(180deg, #0c1016, #121a24); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 34px rgba(0,0,0,.35); color: #F6F3EC; }
@media (max-width: 900px){ .plh{ grid-template-columns: 1fr; } }
.plh__left{ display: grid; gap: 8px; }
.plh__eyebrow{ justify-self: start; font-family: var(--display-big); font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.plh__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(2.4rem, 4.6vw, 3.6rem) !important; line-height: .88 !important; color: #F6F3EC !important; }
.plh__line{ font-weight: 800; font-size: 1.1rem; color: rgba(246,243,236,.92); }
.plh__steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px){ .plh__steps{ grid-template-columns: 1fr; } }
.plh__step{ display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.plh__step b{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); font-family: var(--display-big); font-weight: 900; font-size: 1.5rem; }
.plh__step.is-on{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.plh__step.is-on b{ background: var(--accent); color: var(--accent-ink); }
.plh__step.is-done b{ background: #46e58a; color: #16121C; }
.plh__step > div{ display: grid; gap: 1px; min-width: 0; }
.plh__stepT{ font-family: var(--display-big); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; line-height: 1.05; }
.plh__stepD{ font-weight: 800; font-size: .9rem; color: rgba(246,243,236,.78); }

.pl-card{ display: grid; gap: 14px; padding: 18px 20px !important; border-radius: 20px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
.pl-step{ display: flex; align-items: center; gap: 12px; }
.pl-step__n{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; }
.pl-step__w{ display: grid; gap: 2px; }
.pl-step__title{ margin: 0 !important; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; line-height: 1 !important; color: var(--ink) !important; }
.pl-step__hint{ font-weight: 800 !important; font-size: 1rem !important; color: var(--ink-soft) !important; }
.pl-empty{ margin: 0; padding: 16px; border-radius: 14px; border: 2px dashed var(--line); font-weight: 900; font-size: 1.05rem; text-align: center; color: var(--ink); }

.pl-rulenote{ display: grid; gap: 10px; padding: 14px 16px !important; border-radius: 16px !important; background: linear-gradient(180deg, #0c1016, #121a24) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.pl-rulenote__title{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; color: #F2C14E; }
.pl-rulefacts{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px !important; }
.pl-fact{ display: grid !important; gap: 2px; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(255,255,255,.06) !important; }
.pl-fact__value{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 2.2rem !important; line-height: .95 !important; color: #FFE7A3 !important; }
.pl-fact__label{ font-weight: 800 !important; font-size: .95rem !important; color: rgba(246,243,236,.9) !important; text-transform: none !important; }
.pl-about summary{ cursor: pointer; font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(246,243,236,.85); }
.pl-about .pl-rulenote__text, .pl-about .pl-rulenote__source{ color: rgba(246,243,236,.9) !important; font-weight: 700 !important; margin: 8px 0 0 !important; }

.pl-legend{ display: flex; flex-wrap: wrap; gap: 8px; }
.pl-legend__k{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.pl-legend__k i{ width: 12px; height: 12px; border-radius: 50%; background: #46e58a; }
.pl-legend__k.is-rest i{ background: #ff6f5f; }
.pl-legend__k.is-done i{ background: #F2C14E; }

.pl-cost{ padding: 14px 16px !important; border-radius: 16px !important; background: var(--surface-2) !important; border-left: 5px solid var(--accent) !important; }
.pl-cost__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.4rem !important; }
.pl-cost__line{ font-weight: 700 !important; color: var(--ink) !important; }
.pl-warning{ font-weight: 800 !important; border-radius: 12px !important; }
.pl-mode__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.3rem !important; text-transform: uppercase; }
.pl-mode__note{ font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem !important; }
.pl-setup, .pl-roster, .pl-plan, .pl-board{ margin-top: 18px; }
a.plh__step{ text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.plh__step:hover{ border-color: var(--accent); }
.gc-path{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.gc-path__step{ padding: 7px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: var(--ink); }
.gc-path__arrow{ font-weight: 900; font-size: 1.2rem; color: var(--accent); }
.gc-drop__private{ display: inline-block; margin-bottom: 8px; font-weight: 900; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: #46e58a; }
.gc-drop__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2rem) !important; }
.gc-what{ display: grid; gap: 12px; margin-top: 18px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.gc-what__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2rem) !important; line-height: 1; }
.gc-what__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px){ .gc-what__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-what__card{ display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface-2); border-top: 4px solid var(--accent); }
.gc-what__card b{ font-family: var(--display-big); font-weight: 900; font-size: 2.6rem; line-height: .9; color: var(--ink); }
.gc-what__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.15rem !important; text-transform: uppercase; color: var(--accent) !important; }
.gc-what__line{ font-weight: 700 !important; font-size: .98rem !important; line-height: 1.3; color: var(--ink-soft) !important; }
.gc-what__limit{ font-weight: 900; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.dp-head__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.9rem, 3vw, 2.4rem) !important; }
.dp-head__blurb, .dp-note{ font-weight: 800 !important; font-size: 1.05rem !important; color: var(--ink) !important; }
.ab{ padding: 18px 20px !important; border-radius: 20px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
.ab__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2rem) !important; line-height: 1 !important; }
.ab__sub{ font-weight: 800 !important; font-size: 1rem !important; color: var(--ink-soft) !important; }
.ab__empty{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 14px; border: 2px dashed var(--line); }
.ab__empty b{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; }
.ab__go{ padding: 10px 16px; border-radius: 999px; text-decoration: none; background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); font-family: var(--display-big); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; }
.ab__go::after{ content: " \2192"; }

/* ===== SEPT 21: every coach section has its own color, so the page reads as parts ===== */
[data-tone]{ --tone: var(--accent); }
[data-tone="blue"]{ --tone: #5cc8ff; } [data-tone="purple"]{ --tone: #b494ff; } [data-tone="orange"]{ --tone: #ff9f43; }
[data-tone="slate"]{ --tone: #a9b4c8; } [data-tone="green"]{ --tone: #46e58a; } [data-tone="red"]{ --tone: #ff6b6b; } [data-tone="gold"]{ --tone: #ffc94d; }
.panel-block[data-tone], .pl-card[data-tone]{
  position: relative; border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line)) !important; border-left: 6px solid var(--tone) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 10%, var(--surface)) 0%, var(--surface) 55%) !important;
  border-radius: 20px !important; box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.panel-block[data-tone] > .panel-block__head .panel-block__title, .pl-card[data-tone] .plh__title, .pl-card[data-tone] h2{ color: var(--ink) !important; }
.panel-block[data-tone] > .panel-block__head::before{ content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 4px; background: var(--tone); transform: rotate(45deg); flex: none; }
.panel-block[data-tone] > .panel-block__head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-card[data-tone] .plh__n, .pl-card[data-tone] [class*="step__n"]{ background: var(--tone) !important; color: #120a24 !important; }
.panel-block[data-tone] [class$="__label"]:not(svg *){ color: color-mix(in srgb, var(--tone) 80%, var(--ink)) !important; }

/* Game Settings */
.dp-setbox .dp-settings2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
@media (max-width: 860px){ .dp-setbox .dp-settings2{ grid-template-columns: 1fr; } }
.dp-group{ display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.dp-group__head{ display: flex; justify-content: space-between; align-items: center; }
.dp-group .dp-group__title{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; color: var(--ink); letter-spacing: .02em; }
.dp-group__link{ padding: 5px 12px; border-radius: 999px; background: var(--tone); color: #120a24 !important; font-weight: 900; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.dp-locks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dp-lock{ display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--tone) 45%, var(--line)); }
.dp-lock .dp-lock__value{ font-family: var(--display-big, var(--display)) !important; font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.dp-lock .dp-lock__note{ font-weight: 700 !important; font-size: .82rem !important; color: var(--ink-soft) !important; }
.dp-choice{ display: grid; gap: 7px; }
.dp-seg{ display: flex; flex-wrap: wrap; gap: 6px; }
.dp-seg__btn{ padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.dp-seg__btn:hover{ border-color: var(--tone); transform: translateY(-1px); }
.dp-seg__btn.is-on{ background: var(--tone); border-color: var(--tone); color: #120a24; box-shadow: 0 3px 0 color-mix(in srgb, var(--tone) 45%, #000); }

/* Roster lines carry each player's positions (Sept 21) */
.dp-roster__row{ grid-template-columns: 56px minmax(140px, 220px) minmax(0, 1fr) auto !important; }
@media (max-width: 760px){ .dp-roster__row{ grid-template-columns: 52px minmax(0, 1fr) auto !important; } .dp-poschips{ grid-column: 1 / -1; } }
.dp-poschips{ display: flex; flex-wrap: wrap; gap: 5px; }
.dp-poschip{ min-width: 40px; padding: 8px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1rem; line-height: 1; cursor: pointer; opacity: .6; transition: opacity .12s ease, transform .12s ease; }
.dp-poschip:hover{ opacity: 1; transform: translateY(-1px); }
.dp-poschip.is-on{ opacity: 1; background: color-mix(in srgb, #46e58a 22%, var(--surface)); border-color: #46e58a; }
.dp-poschip.is-first{ opacity: 1; background: #F2C14E; border-color: #F2C14E; color: #16121C; }
.dp-rostertip{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.dp-rostertip__item{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; color: var(--ink); }
.dp-rostertip__item b{ font-weight: 900; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: #F2C14E; }

/* Toned panels: title on the left, content inset from the colored edge (Sept 21) */
.panel-block[data-tone]{ padding: 20px 22px 22px !important; }
.panel-block[data-tone] > .panel-block__head{ justify-content: flex-start !important; padding: 0 0 12px !important; margin: 0 0 14px !important; border-bottom: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line)) !important; }
.panel-block[data-tone] > .panel-block__head .panel-block__title{ margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.panel-block[data-tone] > .panel-block__head .panel-block__title::before, .panel-block[data-tone] > .panel-block__head .panel-block__title::after{ display: none !important; }
.panel-block[data-tone] > .panel-block__head .panel-block__aside{ margin-left: auto !important; }
.dp-glance{ display: grid; gap: 8px; margin: 12px 0; }
.dp-glance__group{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--g, #46e58a); }
.dp-glance__group.is-p{ --g: #46e58a; } .dp-glance__group.is-move{ --g: #5cc8ff; } .dp-glance__group.is-sit{ --g: #a9b4c8; }
.dp-glance__label{ min-width: 110px; font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.dp-glance__chip{ padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: .98rem; color: var(--ink); }
.dp-chip{ display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: none; }
.dp-chip.is-hot{ background: #F2C14E; color: #16121C; border-color: #F2C14E; }
.dp-chip--link{ margin-top: 6px; color: #F2C14E; border-color: color-mix(in srgb, #F2C14E 50%, var(--line)); }
.dp-change__head{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lu-judge__chip{ justify-self: start; display: inline-flex; padding: 5px 12px; border-radius: 999px; background: #F2C14E; color: #16121C; font-weight: 900; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.lu-judge__heading{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: 1.3rem !important; text-transform: uppercase; color: #F2C14E !important; }
.lu-judge__item{ align-content: start !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 14px !important; border-top: 3px solid #F2C14E !important; background: var(--surface-2) !important; }
.lu-judge__title{ font-family: var(--display-big, var(--display)); font-weight: 900 !important; font-size: 1.2rem !important; text-transform: uppercase; line-height: 1.05; }
.lu-judge__text{ font-size: 1.02rem !important; font-weight: 600; color: var(--ink) !important; line-height: 1.45; }
.tmore__btn{ cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-weight: 800; font-size: .9rem; color: var(--ink); list-style: none; }
.tmore__btn::-webkit-details-marker{ display: none; }
.tmore__btn::after{ content: "+"; font-weight: 900; color: #5cc8ff; }
.tmore[open] .tmore__btn::after{ content: "\2212"; }
.tmore__text{ margin: 10px 0 0; font-size: 1rem !important; line-height: 1.55; color: var(--ink) !important; }