/* Coach's Coordinator practice-plan sheet: shared by the editor and the print page.
   Modeled on the owner's Week 1 practice plan, in the team's colour. */
.psheet { --team: #18212b; --on-team: #fff; --line: #c9d1d9; --soft: #f4f6f8;
  background: #fff; color: #18212b; font: 14px/1.4 "Barlow", system-ui, sans-serif; padding: 28px 30px 20px; }
.psheet h1, .psheet p { margin: 0; }
.ps-head { background: var(--team); color: var(--on-team); padding: 16px 20px 14px; border-radius: 4px 4px 0 0; }
.ps-head h1 { overflow-wrap: anywhere; font: 700 30px/1.05 "Barlow Condensed", "Barlow", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.ps-head p { margin-top: 4px; font-size: 13px; opacity: .9; }
.ps-head p i { font-style: normal; opacity: .55; margin: 0 8px; }

.ps-priority { display: grid; grid-template-columns: 150px 1fr; margin: 12px 0; border: 1px solid color-mix(in srgb, var(--team) 45%, #fff); border-radius: 4px; overflow: hidden; }
.ps-priority b { display: flex; align-items: center; padding: 10px 12px; background: color-mix(in srgb, var(--team) 12%, #fff); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ps-priority div { padding: 10px 12px; }

.psheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.psheet th { background: var(--team); color: var(--on-team); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; }
.psheet td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
.ps-blocks tbody tr:nth-child(odd) td { background: var(--soft); }
.ps-blocks .ps-time { width: 92px; font-weight: 700; white-space: nowrap; }
.ps-blocks .ps-focus { width: 170px; font-weight: 700; text-transform: uppercase; font-size: 13px; }
.ps-range { font-variant-numeric: tabular-nums; }
.ps-plays { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ps-play { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--team) 14%, #fff); color: #18212b; }

.ps-callout { margin: 12px 0; padding: 10px 14px; background: #fff3e0; border: 1px solid #f0a35a; border-radius: 4px; }
.ps-callout b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }

.ps-players { margin-top: 12px; }
.ps-players th:nth-child(1) { width: 26%; }
.ps-players th:nth-child(2), .ps-players th:nth-child(4) { width: 14%; }
.ps-players th:nth-child(3) { width: 18%; }
.ps-players td { height: 33px; border: 1px solid var(--line); }
.ps-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: #66727e; }

/* Editing: fields look like the printed text until touched. */
.psheet.editing input, .psheet.editing textarea { width: 100%; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  background: transparent; border: 1px dashed transparent; border-radius: 4px; padding: 2px 4px; margin: -3px -5px; resize: none; overflow: hidden; }
.psheet.editing input:hover, .psheet.editing textarea:hover { border-color: #b8c2cc; }
.psheet.editing input:focus, .psheet.editing textarea:focus { outline: none; border: 1px solid #2f7d0b; background: #fff; box-shadow: 0 0 0 3px #eefbe3; }
.psheet.editing .ps-head input:focus { color: #18212b; }
.psheet.editing input::placeholder, .psheet.editing textarea::placeholder { color: #9aa5b1; text-transform: none; }
.ps-min { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.ps-min b { min-width: 20px; text-align: center; }
.ps-min button, .ps-tools button { width: 24px; height: 24px; border: 1px solid #c9d1d9; border-radius: 6px; background: #fff; color: #18212b; font: 700 14px/1 system-ui; cursor: pointer; padding: 0; }
.ps-min button:hover, .ps-tools button:hover:not(:disabled) { border-color: #2f7d0b; color: #2f7d0b; }
.ps-tools button:disabled { opacity: .3; cursor: default; }
.psheet.editing .ps-blocks .ps-time { width: 150px; }
.psheet.editing .ps-range { display: block; font-size: 12px; color: #66727e; margin-top: 4px; font-weight: 600; }
.ps-tools { width: 92px; text-align: right; white-space: nowrap; }
.ps-tools button + button { margin-left: 3px; }
.ps-add { display: flex; gap: 16px; padding: 8px 2px 0; }
.ps-add .link { font: 700 13px "Barlow", sans-serif; color: #2f7d0b; background: none; border: 0; padding: 4px 0; cursor: pointer; }

@media (max-width: 640px) {
  .psheet { padding: 14px 12px; font-size: 13px; }
  .ps-head h1 { font-size: 24px; }
  .ps-priority { grid-template-columns: 1fr; }
  /* Blocks stack into cards: time and focus on top, what to do below. */
  .ps-blocks thead { display: none; }
  .ps-blocks, .ps-blocks tbody, .ps-blocks tr { display: block; }
  .ps-blocks tr { display: grid; grid-template-columns: auto 1fr auto; border-bottom: 1px solid var(--line); }
  .ps-blocks tbody tr:nth-child(odd) { background: var(--soft); }
  .ps-blocks td, .ps-blocks tbody tr:nth-child(odd) td { border: 0; background: none; padding: 8px; }
  .ps-blocks .ps-time, .psheet.editing .ps-blocks .ps-time { width: auto; }
  .ps-blocks .ps-focus { width: auto; }
  .ps-blocks .ps-what { grid-column: 1 / -1; padding-top: 0; }
  .ps-blocks .ps-tools { grid-column: 3; grid-row: 1; width: auto; }
  .ps-blocks .ps-what { grid-row: 2; }
  .ps-scroll { overflow-x: auto; }
  .ps-players { min-width: 600px; }
}