/*
  Panenka components. Requires tokens.css.
  Blocks prefixed pk- (pk-table), elements (pk-table__num), modifiers
  (pk-btn--primary), states (is-you, is-w, is-live). See docs/design.md.
  Page-specific blocks live in match.css, whiteboard.css, office.css and league.css.
*/

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.pk {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pk-paper-1);
  color: var(--pk-ink-1);
  font: 400 var(--pk-fs-body)/var(--pk-lh-body) var(--pk-font);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--pk-grass-1); }
:focus-visible { outline: 3px solid var(--pk-grass-1); outline-offset: 2px; }
.pk-masthead :focus-visible, .pk-scoreboard :focus-visible { outline-color: var(--pk-led); }

.pk-num { font-variant-numeric: tabular-nums; }
.pk-muted { color: var(--pk-ink-3); }
.pk-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ layout */
.pk-page {
  flex: 1;
  width: 100%;
  max-width: var(--pk-page-max);
  margin: 0 auto;
  padding: var(--pk-s5) var(--pk-gutter) var(--pk-s8);
  display: grid;
  gap: var(--pk-s7);
  align-content: start;
}
.pk-page > *, .pk-split > *, .pk-stack > *, .pk-match > * { min-width: 0; }
.pk-split { display: grid; gap: var(--pk-s6); align-items: start; }
.pk-stack { display: grid; gap: var(--pk-s5); align-content: start; }

@media (min-width: 960px) {
  .pk-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .pk-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section head: display caps over a thick-over-thin rule */
.pk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pk-s3);
  padding-top: var(--pk-s2);
  border-top: 3px solid var(--pk-ink-1);
  box-shadow: inset 0 3px 0 var(--pk-paper-1), inset 0 4px 0 var(--pk-ink-1);
  margin-bottom: var(--pk-s4);
}
.pk-head h2 {
  padding-top: var(--pk-s2);
  font-size: var(--pk-fs-h2);
  font-weight: 850;
  font-family: var(--pk-font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.pk-head__aside { font-size: var(--pk-fs-small); color: var(--pk-ink-3); }

.pk-label {
  font-size: var(--pk-fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pk-ink-3);
}

/* ------------------------------------------------------------------ masthead */
.pk-masthead {
  background: var(--pk-night-1);
  color: var(--pk-chalk-1);
  border-bottom: 4px solid var(--pk-line);
  box-shadow: 0 4px 0 var(--pk-grass-1);
}
.pk-masthead__inner {
  max-width: var(--pk-page-max);
  margin: 0 auto;
  padding: var(--pk-s3) var(--pk-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-s3) var(--pk-s6);
}
.pk-wordmark {
  display: flex;
  align-items: center;
  gap: var(--pk-s2);
  color: var(--pk-chalk-1);
  text-decoration: none;
}
.pk-wordmark:hover { color: var(--pk-chalk-1); }
.pk-wordmark svg { width: 44px; height: 30px; }
.pk-wordmark span {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: var(--pk-font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pk-nav {
  display: flex;
  gap: var(--pk-s1);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.pk-nav a {
  position: relative;
  padding: var(--pk-s2) var(--pk-s3);
  font-size: var(--pk-fs-small);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pk-chalk-2);
  text-decoration: none;
  white-space: nowrap;
}
.pk-nav a:hover { color: var(--pk-chalk-1); }
.pk-nav a.is-current { color: var(--pk-chalk-1); box-shadow: inset 0 -3px 0 var(--pk-led); }
.pk-nav__count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--pk-led);
  color: var(--pk-night-3);
  border-radius: 999px;
  font-size: 0.7rem;
  text-align: center;
  letter-spacing: 0;
}

.pk-strip { background: var(--pk-night-2); color: var(--pk-chalk-2); font-size: var(--pk-fs-small); }
.pk-strip__inner {
  max-width: var(--pk-page-max);
  margin: 0 auto;
  padding: 6px var(--pk-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-s1) var(--pk-s5);
}
.pk-strip b { color: var(--pk-chalk-1); font-weight: 600; }
.pk-strip__live::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--pk-led);
  box-shadow: 0 0 6px var(--pk-led);
  vertical-align: 1px;
}

/* ------------------------------------------------------------------ page title */
.pk-title { display: grid; gap: var(--pk-s1); }
.pk-title h1 {
  font-size: var(--pk-fs-h1);
  font-weight: 900;
  font-family: var(--pk-font-display);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.005em;
}
.pk-title p { color: var(--pk-ink-2); }

/* ------------------------------------------------------------------ buttons */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--pk-s4);
  border: 1.5px solid var(--pk-ink-1);
  border-radius: var(--pk-r-1);
  background: var(--pk-paper-0);
  color: var(--pk-ink-1);
  font: 650 var(--pk-fs-small)/1 var(--pk-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
}
.pk-btn:hover { background: var(--pk-paper-2); color: var(--pk-ink-1); }
.pk-btn--primary { background: var(--pk-ink-1); color: var(--pk-paper-0); }
.pk-btn--primary:hover { background: var(--pk-ink-2); color: var(--pk-paper-0); }

/* ------------------------------------------------------------------ program tables */
.pk-table-wrap { overflow-x: auto; }
.pk-table { width: 100%; border-collapse: collapse; font-size: var(--pk-fs-data);  font-variant-numeric: tabular-nums; }
.pk-table th {
  padding: var(--pk-s2) var(--pk-s3);
  border-bottom: 2px solid var(--pk-ink-1);
  font-size: var(--pk-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--pk-ink-2);
  white-space: nowrap;
}
.pk-table td { padding: var(--pk-s2) var(--pk-s3); border-bottom: 1px solid var(--pk-rule-1); white-space: nowrap; }
.pk-table .r { text-align: right; }
.pk-table tr.is-you td { background: var(--pk-you); }
.pk-table tr:hover td { background: var(--pk-paper-2); }
.pk-table tr.is-you:hover td { background: #e3f2a6; }
.pk-table__name { font-weight: 650; }

/* ------------------------------------------------------------------ frame */
.pk-app { display: flex; flex-direction: column; min-height: 100vh; }
.pk-skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 12px; background: var(--pk-led); color: var(--pk-night-3); font-weight: 700; }
.pk-skip:focus { top: 12px; }
.pk-page--wide { max-width: 1480px; }
.pk-loadbar { height: 3px; background: transparent; }
body.is-loading .pk-loadbar { background: linear-gradient(90deg, transparent, var(--pk-led), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: pk-load 0.9s linear infinite; }
@keyframes pk-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.pk-wordmark__mark { width: 44px; height: 30px; }
.pk-nav__live { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--pk-led); box-shadow: 0 0 6px var(--pk-led); vertical-align: 1px; }

.pk-strip__inner { align-items: center; }
.pk-strip__live { color: var(--pk-led); font-weight: 600; text-decoration: none; }
.pk-strip__live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--pk-led); vertical-align: 1px; animation: pk-blink 1.6s ease-in-out infinite; }
@keyframes pk-blink { 50% { opacity: 0.3; } }
.pk-strip__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pk-strip__btn { min-height: 26px; padding: 0 10px; border: 1px solid var(--pk-night-edge); background: var(--pk-night-1); color: var(--pk-chalk-1); font: 600 var(--pk-fs-label)/1 var(--pk-font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.pk-strip__btn:hover { border-color: var(--pk-led); color: var(--pk-led); }
.pk-strip__btn:disabled { opacity: 0.6; cursor: wait; }
.pk-strip__who { color: var(--pk-chalk-1); text-decoration: none; }
.pk-muted { color: var(--pk-ink-3); }
.pk-strip .pk-muted { color: var(--pk-chalk-2); }

.pk-footer { background: var(--pk-night-2); color: var(--pk-chalk-2); font-size: var(--pk-fs-small); }
.pk-footer__inner { max-width: var(--pk-page-max); margin: 0 auto; padding: var(--pk-s4) var(--pk-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.pk-footer a { color: var(--pk-chalk-1); }

.pk-banner-slot:empty { display: none; }
.pk-banner-slot { display: grid; gap: 8px; }
.pk-banner { display: flex; align-items: center; gap: 12px; }
.pk-banner p { margin: 0; flex: 1; }
.pk-banner a { color: inherit; }
.pk-banner--ok { background: var(--pk-night-1); color: var(--pk-chalk-1); border-left: 4px solid var(--pk-led); }
.pk-banner__close { border: 1px solid currentColor; background: transparent; color: inherit; font: 600 var(--pk-fs-label)/1 var(--pk-font); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 8px; cursor: pointer; }
.pk-devnote { position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 10px 14px; background: var(--pk-led); color: var(--pk-night-3); border: 0; font: 700 var(--pk-fs-small)/1 var(--pk-font); cursor: pointer; box-shadow: var(--pk-shadow-raised); }

/* ------------------------------------------------------------------ type bits */
.pk-lede { color: var(--pk-ink-2); max-width: 70ch; }
.pk-empty { color: var(--pk-ink-3); font-style: italic; padding: var(--pk-s3) 0; }
.pk-more { margin-top: var(--pk-s3); font-size: var(--pk-fs-small); }
.pk-win { color: var(--pk-win); }
.pk-loss { color: var(--pk-loss); }
.pk-cc { font-size: var(--pk-fs-label); font-weight: 600; letter-spacing: 0.06em; color: var(--pk-ink-3); }
.pk-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--pk-rule-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-ink-2); vertical-align: 1px; white-space: nowrap; }
.pk-tag--warn { border-color: var(--pk-loss); color: var(--pk-loss); }
.pk-tag--led { border-color: var(--pk-led-deep); background: var(--pk-you); color: var(--pk-ink-1); }
.pk-linkbtn { border: 0; background: none; padding: 0; color: var(--pk-grass-1); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.pk-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ lists */
.pk-live { display: grid; gap: 0; }
.pk-live li { border-bottom: 1px solid var(--pk-rule-1); }
.pk-live li.is-you { background: var(--pk-you); }
.pk-live__match { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 4px; text-decoration: none; color: inherit; }
.pk-live__dot { grid-row: span 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--pk-loss); animation: pk-blink 1.6s ease-in-out infinite; }
.pk-live__names { font-weight: 650; }
.pk-live__where { font-size: var(--pk-fs-small); color: var(--pk-ink-3); }
.pk-news { display: grid; }
.pk-news li { padding: 8px 0; border-bottom: 1px solid var(--pk-rule-1); font-size: var(--pk-fs-data); }
.pk-news__when { display: inline-block; min-width: 4.5em; font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.06em; color: var(--pk-ink-3); }
.pk-top { display: grid; }
.pk-top li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--pk-rule-1); }
.pk-top__rank { min-width: 2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-top li .pk-num { margin-left: auto; }

/* ------------------------------------------------------------------ the front door */
.pk-hero { padding: var(--pk-s6) var(--pk-s5); background: var(--pk-night-1); color: var(--pk-chalk-1); border-bottom: 4px solid var(--pk-grass-1); background-image: repeating-linear-gradient(90deg, rgba(56, 144, 74, 0.10) 0 60px, transparent 60px 120px); }
.pk-hero h1 { font-size: var(--pk-fs-h1); font-weight: 900; font-family: var(--pk-font-display); text-transform: uppercase; line-height: 1.02; max-width: 16ch; }
.pk-hero .pk-label { color: var(--pk-led); }
.pk-hero .pk-lede { color: var(--pk-chalk-2); margin-top: var(--pk-s3); }
.pk-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--pk-s5); }
.pk-hero .pk-btn { background: transparent; color: var(--pk-chalk-1); border-color: var(--pk-chalk-2); }
.pk-hero .pk-btn--primary { background: var(--pk-led); color: var(--pk-night-3); border-color: var(--pk-led); }

/* ------------------------------------------------------------------ forms */
.pk-form { display: grid; gap: var(--pk-s4); max-width: 30rem; }
.pk-field { display: grid; gap: 6px; }
.pk-field__label { font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-ink-2); }
.pk-field__hint { font-size: var(--pk-fs-small); color: var(--pk-ink-3); }
.pk-input, .pk-select { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--pk-rule-2); border-radius: var(--pk-r-1); background: var(--pk-paper-0); color: var(--pk-ink-1); font: 400 var(--pk-fs-body)/1.2 var(--pk-font); width: 100%; }
.pk-input:focus, .pk-select:focus { border-color: var(--pk-grass-1); outline: none; box-shadow: 0 0 0 2px rgba(47, 125, 59, 0.25); }
.pk-select--sm { min-height: 32px; font-size: var(--pk-fs-small); width: auto; }
.pk-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--pk-fs-small); }
.pk-btn:disabled { opacity: 0.55; cursor: wait; }
.pk-btn--sm { min-height: 28px; padding: 0 10px; font-size: var(--pk-fs-label); }
.pk-btn--danger { border-color: var(--pk-loss); color: var(--pk-loss); }

.pk-account { display: grid; gap: var(--pk-s6); align-items: start; }
@media (min-width: 900px) { .pk-account { grid-template-columns: 1fr 1fr; } }
.pk-card { background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); box-shadow: var(--pk-shadow-paper); padding: var(--pk-s5); }
.pk-card__band { margin: calc(-1 * var(--pk-s5)) calc(-1 * var(--pk-s5)) var(--pk-s5); padding: 10px var(--pk-s5); background: var(--pk-night-1); color: var(--pk-chalk-2); display: flex; justify-content: space-between; font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-card__band b { color: var(--pk-led); }

/* ------------------------------------------------------------------ tabs and toggles */
.pk-tabs { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 2px solid var(--pk-ink-1); margin-bottom: var(--pk-s4); }
.pk-tabs a { padding: 6px 0; font-weight: 700; font-size: var(--pk-fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--pk-ink-3); text-decoration: none; }
.pk-tabs a.is-current { color: var(--pk-ink-1); box-shadow: inset 0 -3px 0 var(--pk-grass-1); }
.pk-pager { display: flex; gap: 12px; align-items: center; margin-top: var(--pk-s4); font-size: var(--pk-fs-small); }

/* ------------------------------------------------------------------ players */
.pk-facts { display: grid; gap: 0; margin: 0; background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); }
.pk-facts > div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--pk-rule-1); font-size: var(--pk-fs-data); }
.pk-facts > div:last-child { border-bottom: 0; }
.pk-facts dt { font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-ink-3); padding-top: 2px; }
.pk-facts dd { margin: 0; }
.pk-subhead { font-size: var(--pk-fs-h3); font-weight: 800; font-family: var(--pk-font-display); text-transform: uppercase; margin: var(--pk-s5) 0 var(--pk-s2); }
.pk-spark { margin: 0; background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); padding: var(--pk-s3); }
.pk-spark svg { width: 100%; height: 70px; }
.pk-spark figcaption { font-size: var(--pk-fs-small); color: var(--pk-ink-3); }

/* ------------------------------------------------------------------ staff and facilities */
.pk-coaches, .pk-facilities { display: grid; gap: var(--pk-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pk-coach, .pk-facility { background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); box-shadow: var(--pk-shadow-paper); padding: var(--pk-s4); display: grid; gap: var(--pk-s2); align-content: start; }
.pk-coach header, .pk-facility header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pk-coach h3, .pk-facility h3 { font-size: var(--pk-fs-h3); font-weight: 800; font-family: var(--pk-font-display); margin: 0; }
.pk-coach__line { font-size: var(--pk-fs-small); color: var(--pk-ink-2); margin: 0; }
.pk-coach__acts { display: flex; gap: 8px; align-items: center; }
.pk-form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: none; }
.pk-form--inline .pk-field { width: 220px; }
.pk-form--wide { max-width: 46rem; }
.pk-prose section { max-width: 72ch; }
.pk-prose p + p { margin-top: var(--pk-s3); }
.pk-errors { display: grid; gap: 6px; font-size: var(--pk-fs-small); }
.pk-errors pre { white-space: pre-wrap; font-size: 0.75rem; background: var(--pk-paper-2); padding: 8px; overflow-x: auto; }
.pk-hero { display: grid; gap: var(--pk-s5); align-items: center; }
@media (min-width: 900px) { .pk-hero { grid-template-columns: 1.1fr 1fr; } }

/* ------------------------------------------------------------------ the club's badge in the masthead */
.pk-mine { display: inline-flex; align-items: center; gap: 8px; color: var(--pk-chalk-1); text-decoration: none; font-size: var(--pk-fs-small); white-space: nowrap; }
.pk-mine b { display: block; font-weight: 700; }
.pk-mine small { display: block; color: var(--pk-chalk-2); font-variant-numeric: tabular-nums; }
.pk-mine:hover { color: var(--pk-led); }
.pk-mine--empty { padding: 6px 10px; border: 1px solid var(--pk-led); color: var(--pk-led); font-weight: 700; }

/* ------------------------------------------------------------------ crests: a shirt in the club's colours */
.pk-crest {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3em; height: 1.7em; padding-top: 0.15em;
  background: linear-gradient(90deg, var(--a) 0 42%, var(--b) 42% 58%, var(--a) 58%);
  color: var(--b); font: 800 0.62rem/1 var(--pk-font-display); letter-spacing: 0.04em;
  clip-path: polygon(22% 0, 38% 8%, 62% 8%, 78% 0, 100% 18%, 88% 38%, 80% 32%, 80% 100%, 20% 100%, 20% 32%, 12% 38%, 0 18%);
  text-shadow: 0 0 2px var(--a), 0 0 2px var(--a);
}
.pk-crest--md { font-size: 0.78rem; }
.pk-crest--lg { font-size: 1.15rem; }
.pk-clublink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pk-clublink:hover span { text-decoration: underline; }

/* ------------------------------------------------------------------ small marks */
.pk-cc { font-size: var(--pk-fs-label); font-weight: 600; letter-spacing: 0.06em; color: var(--pk-ink-3); }
.pk-pos { display: inline-block; min-width: 2.4em; padding: 1px 4px; font: 700 0.7rem/1.4 var(--pk-font-display); letter-spacing: 0.06em; text-align: center; color: #fff; background: var(--pk-ink-2); }
.pk-pos--gk { background: #8a6d1d; }
.pk-pos--cb, .pk-pos--fb { background: #1f5a8a; }
.pk-pos--dm, .pk-pos--cm, .pk-pos--am { background: var(--pk-grass-1); }
.pk-pos--w, .pk-pos--st { background: #9a2f2f; }
.pk-grade { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pk-grade b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-grade__word { font-size: var(--pk-fs-small); color: var(--pk-ink-3); }
.pk-grade--range b { color: var(--pk-ink-2); }
.pk-bar { position: relative; display: block; height: 10px; background: var(--pk-paper-2); }
.pk-bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--pk-grass-1); }
.pk-bar__whisker { position: absolute; top: 4px; height: 2px; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); background: var(--pk-ink-1); }
.pk-formguide { display: inline-flex; gap: 2px; }
.pk-formguide i { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; font: 700 0.68rem/1 var(--pk-font-display); font-style: normal; color: #fff; }
.pk-formguide__w { background: var(--pk-win); }
.pk-formguide__d { background: var(--pk-draw); }
.pk-formguide__l { background: var(--pk-loss); }
.pk-booking { display: inline-block; width: 0.62em; height: 0.86em; border-radius: 1px; vertical-align: -0.1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.pk-booking--yellow { background: var(--pk-yellow); }
.pk-booking--red { background: var(--pk-red); }

/* ------------------------------------------------------------------ fixtures and results */
.pk-fixes { display: grid; gap: 0; background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); }
.pk-fix { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--pk-rule-1); font-size: var(--pk-fs-data); }
.pk-fix:last-child { border-bottom: 0; }
.pk-fix__home { justify-self: end; text-align: right; }
.pk-fix__home .pk-clublink { flex-direction: row-reverse; }
.pk-fix__score, .pk-fix__time, .pk-fix__live { justify-self: center; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.pk-fix__score { padding: 2px 8px; background: var(--pk-night-1); color: var(--pk-led); font: 700 1rem/1.3 var(--pk-font-display); letter-spacing: 0.04em; }
.pk-fix__time { color: var(--pk-ink-3); font-size: var(--pk-fs-small); }
.pk-fix__live { padding: 2px 8px; background: var(--pk-led); color: var(--pk-night-3); font: 800 0.8rem/1.3 var(--pk-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.pk-fix.is-you { background: var(--pk-you); }
.pk-fix.is-w .pk-fix__score { box-shadow: inset 0 -3px 0 var(--pk-win); }
.pk-fix.is-l .pk-fix__score { box-shadow: inset 0 -3px 0 var(--pk-loss); }
@media (max-width: 520px) { .pk-fix { grid-template-columns: minmax(0, 1fr) 5.5em minmax(0, 1fr); font-size: var(--pk-fs-small); } }

/* ------------------------------------------------------------------ the scoreboard (live or final) */
.pk-scoreboard { background: var(--pk-night-1); color: var(--pk-chalk-1); padding: var(--pk-s4) var(--pk-s5); border-bottom: 4px solid var(--pk-grass-1); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--pk-s3); align-items: center; }
.pk-scoreboard__side { display: flex; align-items: center; gap: 10px; font: 700 clamp(1.05rem, 2.6vw, 1.6rem)/1.1 var(--pk-font-display); text-transform: uppercase; min-width: 0; }
.pk-scoreboard__side a { color: inherit; text-decoration: none; }
.pk-scoreboard__side--home { justify-content: flex-end; text-align: right; }
.pk-scoreboard__score { font: 800 clamp(2.2rem, 7vw, 3.6rem)/1 var(--pk-font-display); color: var(--pk-led); letter-spacing: 0.04em; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 178, 30, 0.35); }
.pk-scoreboard__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: var(--pk-chalk-2); font-size: var(--pk-fs-small); }
.pk-scoreboard__minute { color: var(--pk-led); font-weight: 700; }

/* ------------------------------------------------------------------ stats as paired bars */
.pk-stats { background: var(--pk-paper-0); border: 1px solid var(--pk-rule-1); padding: var(--pk-s4); display: grid; gap: var(--pk-s3); }
.pk-stat { display: grid; grid-template-columns: 3.2em 1fr 3.2em; gap: 2px var(--pk-s2); align-items: center; font-size: var(--pk-fs-data); font-variant-numeric: tabular-nums; }
.pk-stat__label { grid-column: 1 / -1; text-align: center; font-size: var(--pk-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-ink-3); }
.pk-stat__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 8px; }
.pk-stat__bars i { display: block; height: 100%; }
.pk-stat__bars i:first-child { background: linear-gradient(270deg, var(--pk-grass-1) calc(var(--h) * 1%), var(--pk-paper-2) 0); }
.pk-stat__bars i:last-child { background: linear-gradient(90deg, var(--pk-ink-2) calc(var(--a) * 1%), var(--pk-paper-2) 0); }
.pk-stat .r { text-align: right; }

/* ------------------------------------------------------------------ the news */
.pk-news { display: grid; gap: 0; }
.pk-news li { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--pk-rule-1); font-size: var(--pk-fs-data); }
.pk-news time { color: var(--pk-ink-3); font-size: var(--pk-fs-small); }
.pk-news__kind { display: inline-block; margin-right: 6px; font: 700 0.66rem/1.5 var(--pk-font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-ink-3); }
.pk-news li.is-big .pk-news__kind { color: var(--pk-loss); }