/* Panenka: office pages (market, finances, staff, a club, a player). Requires tokens.css and panenka.css (docs/design.md). */

/* ------------------------------------------------------------------ key figures in a row */
.pk-sums { display: flex; flex-wrap: wrap; gap: var(--pk-s3) var(--pk-s6); margin: 0 0 var(--pk-s4); padding: var(--pk-s3) 0; border-bottom: 1px solid var(--pk-rule-1); }
.pk-sums > div { display: grid; gap: 2px; }
.pk-sums dt { font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-ink-3); }
.pk-sums dd { margin: 0; font: 700 var(--pk-fs-h3)/1.2 var(--pk-font-display); font-variant-numeric: tabular-nums; }
.pk-sums dd .pk-grade__word, .pk-sums dd .pk-muted { font: 400 var(--pk-fs-small)/1.2 var(--pk-font); }
.pk-sums dd a { text-decoration: none; }

.pk-table td.pk-wrap { white-space: normal; min-width: 14em; }
.pk-table tfoot td { border-top: 2px solid var(--pk-ink-1); border-bottom: 0; font-weight: 700; }
.pk-table tr.is-better td:first-child { box-shadow: inset 3px 0 0 var(--pk-grass-1); }

/* ------------------------------------------------------------------ the market */
.pk-filters { display: flex; flex-wrap: wrap; gap: var(--pk-s3); }
.pk-filters .pk-field { width: min(100%, 11rem); }
.pk-filters .pk-select { min-height: 36px; }

/* A deal's form opens under its row and stays in view when the table scrolls sideways. */
.pk-table tr.pk-expand td { padding: 0; background: var(--pk-paper-2); white-space: normal; }
.pk-table tr.pk-expand:hover td { background: var(--pk-paper-2); }
.pk-expand .pk-deal { position: sticky; left: 0; width: min(46rem, calc(100vw - 2 * var(--pk-gutter))); padding: var(--pk-s4) var(--pk-s3); }
.pk-deal { display: grid; gap: var(--pk-s3); }
.pk-deal__fields { display: flex; flex-wrap: wrap; gap: var(--pk-s3) var(--pk-s4); }
.pk-deal__fields .pk-field { flex: 1 1 13rem; }
.pk-money { display: flex; align-items: center; gap: var(--pk-s2); }
.pk-money .pk-input { flex: 1 1 auto; min-width: 0; }
.pk-money__read { flex: none; min-width: 4.5em; font-weight: 700; color: var(--pk-ink-2); }

/* ------------------------------------------------------------------ finances */
.pk-chart { margin: 0; background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); padding: var(--pk-s3); }
.pk-chart svg { width: 100%; height: auto; }
.pk-chart figcaption { margin-top: var(--pk-s2); font-size: var(--pk-fs-small); color: var(--pk-ink-3); }
.pk-chart__axis { stroke: var(--pk-ink-1); stroke-width: 1; }
.pk-chart__in { fill: var(--pk-win); }
.pk-chart__out { fill: var(--pk-loss); }
.pk-chart__label { fill: var(--pk-ink-3); font: 600 11px var(--pk-font); font-variant-numeric: tabular-nums; }

/* The wage bill as a share of income, with the 50-70% band most clubs run in. */
.pk-meter { position: relative; height: 14px; margin: var(--pk-s2) 0; background: var(--pk-paper-2); border: 1px solid var(--pk-rule-1); }
.pk-meter__band { position: absolute; inset: 0 auto 0 50%; width: 20%; background: var(--pk-rule-1); }
.pk-meter__fill { position: absolute; left: 0; top: 4px; height: 4px; width: calc(var(--v) * 1%); background: var(--pk-ink-1); }

.pk-crowd { width: 30%; min-width: 6em; }
.pk-seatcost { margin: 0; align-self: center; font-size: var(--pk-fs-small); }
.pk-level { display: inline-flex; gap: 3px; padding-top: 4px; }
.pk-level i { width: 10px; height: 10px; border: 1px solid var(--pk-ink-2); }
.pk-level i.is-on { background: var(--pk-grass-1); border-color: var(--pk-grass-1); }

/* ------------------------------------------------------------------ staff */
.pk-coach__acts .pk-select { width: auto; min-height: 28px; font-size: var(--pk-fs-small); }
.pk-coach__acts { flex-wrap: wrap; }

/* ------------------------------------------------------------------ a club */
.pk-clubhead { display: flex; align-items: center; gap: var(--pk-s4); }
.pk-clubhead .pk-crest--lg { font-size: 1.6rem; }
.pk-yours { display: grid; gap: var(--pk-s3); }
.pk-yours .pk-sums { margin: 0; }
.pk-fixline { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--pk-rule-1); }
.pk-fixline:last-child { border-bottom: 0; }
.pk-fixline .pk-fix { border-bottom: 0; padding-left: 0; }
.pk-fixline__when { padding-left: 10px; font-size: var(--pk-fs-label); font-weight: 600; color: var(--pk-ink-3); }
@media (max-width: 520px) {
  .pk-fixline { grid-template-columns: 1fr; }
  .pk-fixline__when { padding-top: 4px; }
  .pk-fixline .pk-fix { padding-left: 10px; }
}

/* ------------------------------------------------------------------ a player */
.pk-shirt { display: inline-block; min-width: 1.4em; padding: 0 0.15em; background: var(--pk-ink-1); color: var(--pk-paper-0); text-align: center; }
.pk-skills { display: grid; gap: 0 var(--pk-s5); }
@media (min-width: 640px) { .pk-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-skills .pk-subhead { margin-top: var(--pk-s4); }
.pk-skillbars { display: grid; margin: 0; }
.pk-skillbars > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 5.5em; gap: var(--pk-s2); align-items: center; padding: 5px 0; border-bottom: 1px solid var(--pk-rule-1); font-size: var(--pk-fs-data); }
.pk-skillbars dt { color: var(--pk-ink-2); }
.pk-skillbars dd { margin: 0; }
.pk-skillbars dd:last-child { text-align: right; font-weight: 700; }
.pk-skillbars dd:last-child .pk-muted { font-weight: 400; font-size: var(--pk-fs-small); }
.pk-result { text-decoration: none; font-variant-numeric: tabular-nums; }
.pk-result--w b { color: var(--pk-win); }
.pk-result--d b { color: var(--pk-draw); }
.pk-result--l b { color: var(--pk-loss); }
.pk-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-s3); padding: var(--pk-s3) var(--pk-s4); background: var(--pk-you); border-left: 4px solid var(--pk-led-deep); }
.pk-callout p { margin: 0; }
.pk-chart__axis--faint { stroke: var(--pk-rule-2); stroke-dasharray: 3 3; }
.pk-chart__line { fill: none; stroke: var(--pk-ink-1); stroke-width: 2; }
.pk-chart__dot { fill: var(--pk-ink-1); }
.pk-chart + .pk-chart { margin-top: var(--pk-s3); }