/* =====================================================================
   MARROW FOR A HEAD COACH.  head-coach/head-coach.css
   The page's own sheet in the public rollout (2026-10-09, lane 2 of
   ~/.edwinstrong/design-canon/public-rollout-plan-20261008.md, section 3.4,
   Edwin's decision 2). Loaded after assets/public/public.css, so every band,
   pill, ring, card and the console frame come from the shared system; this
   sheet holds only what this page draws:

     .hc-stage    the signature graphic: the Trainers tab of the coach
                  dashboard (coach/dashboard/index.html, section "team", rows
                  from assets/js/team-roster-view.js) with the Set the monthly
                  team fee dialog beside it. The fee is typed, saved, lands on
                  every coach's row, and one coach is comped.
     .gc-*        the console canvas, drawn at 1120 wide inside .pub-console
                  and scaled by public.js (--s); --u enlarges it on a phone

   RULES THIS SHEET KEEPS. Colours only through the --hy-* and css/styles.css
   tokens. No gradient, no box shadow, no filter, no text shadow (the depth is
   the shared frame's). Motion moves only opacity and transform, starts only
   under html.pub-armed, plays once when the block gets .is-in, and the base
   rules are the rest state that reduced motion and Pause motion show.
   No em or en dashes.
   ===================================================================== */

/* ---------- The console canvas ---------- */
#main .hc-app { --u: 1; display: flex; flex-direction: column; gap: calc(20px * var(--u)); padding: calc(34px * var(--u)) calc(36px * var(--u)); }
#main .gc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#main .gc-eb { margin: 0 0 calc(8px * var(--u)); font-family: var(--mono); font-weight: 500; font-size: calc(14px * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); }
#main .gc-title { font-family: var(--serif); font-weight: 300; font-size: calc(44px * var(--u)); line-height: 1.05; letter-spacing: -0.015em; color: var(--hy-ink); }
#main .gc-lede { margin-top: calc(8px * var(--u)); font-size: calc(17px * var(--u)); line-height: 1.45; color: var(--hy-muted); }
#main .gc-btn { flex: none; display: inline-flex; align-items: center; height: calc(44px * var(--u)); padding: 0 calc(20px * var(--u)); border-radius: 999px; border: 1px solid var(--hy-edge); background: var(--hy-sunk); font-size: calc(16px * var(--u)); font-weight: 500; color: var(--hy-ink); white-space: nowrap; }
#main .gc-card { padding: calc(22px * var(--u)) calc(24px * var(--u)) calc(8px * var(--u)); border-radius: calc(16px * var(--u)); background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 70%, transparent); }
#main .gc-card-t { margin-bottom: calc(10px * var(--u)); font-family: var(--serif); font-weight: 400; font-size: calc(24px * var(--u)); line-height: 1.2; color: var(--hy-ink); }
#main .gc-th, #main .gc-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.6fr) minmax(0, 0.55fr) minmax(0, 1.25fr) auto; align-items: center; gap: calc(14px * var(--u)); }
#main .gc-th { padding: calc(6px * var(--u)) 0 calc(10px * var(--u)); border-bottom: 1px solid var(--hy-hairline); font-family: var(--mono); font-weight: 500; font-size: calc(12px * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); }
#main .gc-tr { min-height: calc(72px * var(--u)); border-bottom: 1px solid var(--hy-hairline); font-size: calc(17px * var(--u)); color: var(--hy-ink); }
#main .gc-tr:last-child { border-bottom: 0; }
#main .gc-name { display: flex; flex-direction: column; gap: calc(3px * var(--u)); min-width: 0; font-weight: 500; }
#main .gc-sub { font-weight: 400; font-size: calc(14px * var(--u)); color: var(--hy-muted); }
#main .gc-num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
#main .gc-pill { justify-self: start; display: inline-flex; align-items: center; height: calc(28px * var(--u)); padding: 0 calc(12px * var(--u)); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hy-teal) 55%, transparent); font-size: calc(13px * var(--u)); font-weight: 500; color: var(--hy-teal); white-space: nowrap; }
#main .gc-acts { display: flex; gap: calc(8px * var(--u)); }
#main .gc-q { display: inline-flex; align-items: center; height: calc(32px * var(--u)); padding: 0 calc(12px * var(--u)); border-radius: calc(8px * var(--u)); border: 1px solid var(--hy-hairline); font-size: calc(13px * var(--u)); font-weight: 500; color: var(--hy-muted); white-space: nowrap; }
#main .gc-q.is-on { border-color: var(--hy-aqua-hi); color: var(--hy-ink); }

/* The fee cell: what the row said before, and what it says now, in one cell. */
#main .hc-fee { position: relative; display: grid; align-items: center; font-variant-numeric: tabular-nums lining-nums; }
#main .hc-fee > span { grid-area: 1 / 1; }
#main .hc-fee .hc-unset { color: var(--hy-muted); opacity: 0; }
#main .hc-fee .hc-set { color: var(--hy-ink); }
#main .hc-fee .hc-comp { justify-self: start; display: inline-flex; align-items: center; height: calc(28px * var(--u)); padding: 0 calc(12px * var(--u)); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--atelier-dark-amber) 60%, transparent); font-size: calc(13px * var(--u)); font-weight: 500; color: var(--atelier-dark-amber); }
#main .hc-fee .hc-gone { opacity: 0; }

/* The stat strip: four tiles, as buildStatStrip draws them. */
#main .hc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14px * var(--u)); }
#main .hc-tile { display: flex; flex-direction: column; gap: calc(8px * var(--u)); padding: calc(18px * var(--u)) calc(20px * var(--u)); border-radius: calc(14px * var(--u)); background: var(--hy-sunk); border: 1px solid var(--hy-hairline); }
#main .hc-tile-l { font-family: var(--mono); font-weight: 500; font-size: calc(12px * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); }
#main .hc-tile-v { font-family: var(--serif); font-weight: 300; font-size: calc(36px * var(--u)); line-height: 1; color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; }
#main .hc-tile-v.is-teal { color: var(--hy-teal); }
#main .hc-tile-w { font-size: calc(15px * var(--u)); line-height: 1.35; color: var(--hy-ink); }

/* ---------- 2. The team fee you set (light) ---------- */
#main .hc-teamfee .pub-head { max-width: 720px; }
#main .hc-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; margin-top: 8px; }
#main .hc-stage > .pub-console:first-child { width: auto; max-width: none; grid-column: 1; grid-row: 1; margin-right: -28px; }
#main .hc-teamfee .pub-console-glass { aspect-ratio: 16 / 9.2; }
#main .hc-app .hc-c-ath { text-align: center; }
#main .hc-dialog { grid-column: 2; grid-row: 1; z-index: 2; margin-top: 150px; max-width: none; padding: 26px 26px 24px; color: var(--hy-ink); }
#main .hc-dialog .hc-d-eb { margin: 0 0 6px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); }
#main .hc-dialog .hc-d-t { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--hy-ink); }
#main .hc-dialog .hc-d-note { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--hy-muted); }
#main .hc-dialog .hc-d-note b { font-weight: 600; color: var(--hy-ink); }
#main .hc-radio { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; color: var(--hy-ink); }
#main .hc-radio i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--hy-boundary); }
#main .hc-radio.is-on i { border-color: var(--hy-aqua-hi); }
#main .hc-radio.is-on i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hy-aqua-hi); }
#main .hc-d-label { margin: 16px 0 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); }
#main .hc-d-input { display: flex; align-items: center; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--hy-aqua-hi); background: var(--hy-sunk); font-family: var(--serif); font-weight: 300; font-size: 28px; color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; }
#main .hc-d-input small { margin-left: 8px; font-family: var(--sans); font-size: 13px; color: var(--hy-muted); }
#main .hc-d-acts { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
#main .hc-d-save { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--hy-aqua); color: var(--hy-ground); font-size: 15px; font-weight: 600; }
#main .hc-d-later { font-size: 14px; color: var(--hy-muted); }

/* ---------- 3. What a head coach gets (dark) ---------- */
#main .hc-gets .pub-door { padding-bottom: 32px; }
#main .hc-gets .pub-door-h { margin-bottom: 12px; }
#main .dialed-band p.hc-get-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hy-muted); }

/* ---------- Phone first ---------- */
@media (max-width: 1180px) {
  #main .hc-stage { grid-template-columns: minmax(0, 1fr) 310px; }
  #main .hc-stage > .pub-console:first-child { margin-right: -24px; }
}
@media (max-width: 1023px) {
  #main .hc-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #main .hc-stage > .pub-console:first-child { width: 100%; margin-right: 0; }
  #main .hc-dialog { grid-column: 1; grid-row: 2; width: min(340px, 100%); margin-top: -64px; justify-self: end; }
}
@media (max-width: 767px) {
  /* Read on a phone at a third of its size: larger type, two tiles a row, the coach and the fee only. */
  #main .hc-app { --u: 1.9; padding: 40px 44px; }
  #main .hc-teamfee .pub-console-glass { aspect-ratio: 3 / 4; }
  #main .hc-app .gc-btn, #main .hc-app .gc-lede { display: none; }
  #main .hc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .hc-stats .hc-tile:nth-child(4) { display: none; }
  #main .hc-stats .hc-tile:nth-child(3) { grid-column: 1 / -1; }
  #main .gc-th, #main .gc-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  #main .hc-app :is(.hc-c-status, .hc-c-ath, .gc-acts, .hc-c-acts) { display: none; }
  #main .hc-dialog { width: calc(100% - 24px); margin-top: -48px; padding: 22px 20px 20px; }
}

/* =====================================================================
   MOTION. Only under html.pub-armed (the head gate); the rules above are the rest.
   The amount is typed into the dialog, Save is pressed, the fee lands on each
   coach's row 140ms apart, and the last coach is comped.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pub-armed #main .hc-teamfee:not(.is-in) .hc-unset { opacity: 1; }
  .pub-armed #main .hc-teamfee:not(.is-in) .hc-set { opacity: 0; }
  .pub-armed #main .hc-teamfee:not(.is-in) .hc-set.hc-gone { opacity: 0; }
  .pub-armed #main .hc-teamfee:not(.is-in) .hc-comp { opacity: 0; }
  .pub-armed #main .hc-teamfee:not(.is-in) .hc-dialog { opacity: 0; transform: translateY(24px); }
  .pub-armed #main .hc-teamfee.is-in .hc-dialog { animation: hc-kf-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both; }
  .pub-armed #main .hc-teamfee.is-in .hc-d-save { animation: pub-kf-press 360ms ease 1900ms both; }
  .pub-armed #main .hc-teamfee.is-in .hc-unset { animation: hc-kf-out 360ms ease calc(2250ms + var(--k, 0) * 140ms) both; }
  .pub-armed #main .hc-teamfee.is-in .hc-set { animation: hc-kf-in 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(2350ms + var(--k, 0) * 140ms) both; }
  .pub-armed #main .hc-teamfee.is-in .hc-set.hc-gone { animation: hc-kf-in 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(2350ms + var(--k, 0) * 140ms) both, hc-kf-out 420ms ease 3300ms forwards; }
  .pub-armed #main .hc-teamfee.is-in .hc-comp { animation: hc-kf-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) 3500ms both; }
}

@keyframes hc-kf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hc-kf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hc-kf-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hc-kf-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }