/* Programme — a skin for the EIHL Fantasy front end.
 *
 * Design direction 3. Loaded after styles.css and inert until Theme picks it.
 *
 * Scene: the stapled matchnight programme you buy on the way in. Warm stock,
 * a display serif for the headings, double rules between sections, and the
 * line-up set as a proper team sheet. Slower than the other looks on purpose.
 *
 * Light is the daytime edition on cream stock. Dark is the evening one,
 * printed on near-black card with warm cream ink — the same press, different
 * paper, not an inversion.
 *
 * The signature colour is the terracotta second plate, and it lives in
 * --primary so a manager's accent replaces it. Nothing below names a
 * terracotta literally. The captain's armband stays black, as it would in
 * print; errors get an explicit red.
 */

:root[data-theme="light"] {
  --bg:          #f2ece1;   /* warm stock, never white */
  --surface:     #ffffff;
  --surface-2:   #e8e0d2;
  --surface-3:   #ddd3c0;

  --line:        #cbc0ad;
  --line-soft:   #e0d7c7;

  --ink:         #1f1b16;
  --ink-muted:   #5d5547;   /* 6.3:1 on --bg */
  --ink-faint:   #6e6556;   /* 5.0:1 on --bg */

  --primary:     #8c2f26;   /* the second plate */
  --primary-dim: #6b231c;
  --primary-ink: #ffffff;
  --primary-wash: rgba(140, 47, 38, 0.10);

  /* In print the captain wears a black armband, not a red one. */
  --alert:       #1f1b16;
  --alert-wash:  rgba(31, 27, 22, 0.08);
  --warn:        #8a6100;

  /* Programme-only */
  --pg-err:    #a8321f;   /* an actual error, distinct from the armband */
  --pg-plate:  #ffffff;   /* the sheet the line-up is printed on */
  --pg-rule:   1px solid #cbc0ad;
  --pg-pos-g:  #6b4a00;
  --pg-pos-d:  #1f4e5f;
}

:root[data-theme="dark"] {
  --bg:          #17130f;   /* near-black card, warm not neutral */
  --surface:     #1f1a15;
  --surface-2:   #2a231c;
  --surface-3:   #352c23;

  --line:        #4a3f33;
  --line-soft:   #2a231c;

  --ink:         #f2ece1;
  --ink-muted:   #bdb2a2;   /* 9.1:1 on --bg */
  --ink-faint:   #9c9080;   /* 6.0:1 on --bg */

  --primary:     #d4634f;   /* the same plate, lifted to hold on dark card */
  --primary-dim: #b04f3e;
  --primary-ink: #17130f;
  --primary-wash: rgba(212, 99, 79, 0.16);

  --alert:       #f2ece1;   /* the armband inverts with the ink */
  --alert-wash:  rgba(242, 236, 225, 0.10);
  --warn:        #e0a33c;

  --pg-err:    #ef6a55;
  --pg-plate:  #1f1a15;
  --pg-rule:   1px solid #4a3f33;
  --pg-pos-g:  #dcae55;
  --pg-pos-d:  #7fb6c9;
}

:root {
  --radius-sm: 0px;
  --radius:    0px;
  --radius-lg: 0px;
  --shadow-1: none;
  --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.35);
}

html, body {
  font-family: Lora, Georgia, 'Times New Roman', serif;
  background: var(--bg);
}

h1, h2, h3,
.bank__figure, .jsy__num, .match__score,
.statgrid__value, .livegame__score {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1 { font-size: 1.62rem; line-height: 1.04; }
h2 { font-size: 1.16rem; }
h3 { font-size: 0.98rem; }

/* Playfair is wide, and the topbar h1 is a single non-wrapping line: at
   1.62rem "Frozen Crew" needs 149px in a 136px box and clips to "Frozen C…".
   Smaller here, and the gameweek pill abbreviates sooner. */
.topbar h1 { font-size: 1.18rem; }
@media (min-width: 430px) { .topbar h1 { font-size: 1.4rem; } }
@media (max-width: 430px) {
  .gw-pill__label { font-size: 0; }
  .gw-pill__label::before { content: "GW"; font-size: 0.64rem; }
}

/* ------------------------------------------------------------ the shell */

.topbar {
  background: var(--bg);
  border-bottom: 3px double var(--ink);
  backdrop-filter: none;
}
/* Scoped: app.js reuses .topbar__sub for muted captions throughout. */
.topbar .topbar__sub {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.6rem;
  font-family: Lora, serif;
}
.topbar .motto { color: var(--ink-muted); font-style: italic; }

.gw-pill {
  border-radius: 0;
  border: 1px solid var(--ink);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.64rem;
}
.gw-pill b { color: var(--primary); }
.help-btn { border-radius: 0; border-color: var(--ink); color: var(--ink); }
.identity .avatar { border-radius: 0; border: 1px solid var(--ink); }
.live-badge { border-radius: 0; background: var(--pg-err); color: #ffffff; }

.tabbar {
  background: var(--bg);
  border-top: 3px double var(--ink);
  backdrop-filter: none;
}
.tabbar button {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 600;
}

/* ---------------------------------------------------------- the takings */

.bank {
  background: transparent;
  border: 0;
  border-bottom: var(--pg-rule);
  border-radius: 0;
  padding: 10px 2px 14px;
}
.bank__figure { font-size: 2.3rem; color: var(--ink); }
.bank__figure.is-over { color: var(--pg-err); }
.bank__unit, .bank__stat span {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.58rem;
}
.bank__stat b { font-family: 'Playfair Display', serif; font-weight: 800; }
.bank__track { background: var(--surface-3); border-radius: 0; height: 3px; }
.bank__fill { background: var(--ink); border-radius: 0; }
.bank__fill.is-over { background: var(--pg-err); }

/* -------------------------------------------------------- the team sheet */

.ice {
  background: var(--pg-plate);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0 0 10px;
}
.ice__markings { display: none; }   /* a printed sheet has no rink diagram */

.ice__unit { margin-bottom: 0; }
.ice__tag {
  justify-content: flex-start;
  padding: 10px 14px 5px;
  margin-bottom: 8px;
  border-bottom: var(--pg-rule);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}
.ice__tag i { color: var(--ink-muted); font-family: Lora, serif; letter-spacing: 0; }
.ice__row { gap: 4px; padding: 0 8px; }

/* 60px + a 4px gap fits a five-man forward line on one row inside the 325px
   of usable width. At 62px it overflowed by a single pixel and wrapped 4 + 1. */
.jsy { width: 60px; }
.jsy:hover { transform: none; }
.jsy__shirt {
  width: 48px; height: 52px;
  /* The shirt silhouette is kept: it is the one illustrative thing on the
     page, and a programme would print exactly that. */
  border: 1px solid var(--ink);
}
.jsy:hover .jsy__shirt { filter: brightness(1.06); }
.jsy__num { font-size: 1.2rem; text-shadow: none; }
.jsy__name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--ink);
}
.jsy__club {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.55rem;
  color: var(--ink-muted);
}
.jsy__pts {
  border-radius: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  min-width: 34px;
  padding: 1px 6px;
  font-size: 0.8rem;
}
.jsy__pts--zero  { color: var(--ink-faint); border-top-color: var(--line); }
.jsy__pts--neg   { color: var(--pg-err); border-top-color: var(--pg-err); }
.jsy__pts--price { color: var(--ink-muted); border-top-color: var(--line); }

/* Did not play. A 45% opacity turns a club colour into a pastel wash on
   stock, which reads as the wrong club rather than a quiet one. */
.jsy--out { opacity: 1; }
.jsy--out .jsy__shirt { filter: grayscale(0.9) contrast(0.85); }
.jsy--out .jsy__name { color: var(--ink-muted); }

.jsy--empty .jsy__shirt { border: 1px dashed var(--line); }
.jsy__badge {
  border-radius: 0;
  border: 1px solid var(--pg-plate);
  font-family: Lora, serif;
  font-weight: 700;
}
/* styles.css puts near-white text on var(--alert). Here --alert is the ink,
   which is black on stock but cream on card, so a fixed white legend goes
   invisible in the evening edition. The armband is always ink with the
   page colour on it: 14.6:1 light, 13.9:1 dark. */
.jsy__badge--c { background: var(--alert); color: var(--bg); }
.jsy__badge--v { background: var(--surface-3); color: var(--ink); }

/* ------------------------------------------------------------- the rest */

.card { background: var(--surface); border: 1px solid var(--ink); border-radius: 0; }
.note { border-radius: 0; border: 1px solid var(--ink); }
.note--bad {
  border-color: var(--pg-err);
  background: rgba(168, 50, 31, 0.10);
  color: var(--ink);
}

.btn {
  border-radius: 0;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  font-weight: 600;
}
.btn--primary {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.chip, .field, .segmented, .guide__navlink, .seg-theme button,
.field--stack input {
  border-radius: 0;
  border: 1px solid var(--ink);
}
.segmented button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; }
.segmented button + button { border-left: 1px solid var(--ink); }
.seg-theme button { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }

/* Ink on a pale tint, as a second-colour panel would print. The stock chips
   use a light hue on a light tint, which does not survive this ground. */
.pos-chip { border-radius: 0; font-family: Lora, serif; }
.pos-chip--G { background: var(--surface-2); color: var(--pg-pos-g); }
.pos-chip--D { background: var(--surface-2); color: var(--pg-pos-d); }
.pos-chip--F { background: var(--primary-wash); color: var(--primary); }

.plist { gap: 0; }
.prow { background: var(--surface); border-bottom: var(--pg-rule); }
.prow__face { border-radius: 0; border: 1px solid var(--ink); }
.prow__name { font-family: 'Playfair Display', serif; font-weight: 700; }
/* Points per game decides a pick; price is a constraint. Swap their weight. */
.prow__price { font-size: 0.72rem; font-weight: 400; color: var(--ink-muted); }
.prow__ppg { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

.table th {
  background: var(--ink);
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  font-family: Lora, serif;
}
.table td { border-bottom: var(--pg-rule); }

.daygroup__day {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.64rem;
  color: var(--ink);
}
.match { background: var(--surface); border: 1px solid var(--line); border-radius: 0; }
.match__dot { width: 4px; height: 26px; border-radius: 0; border: 1px solid var(--ink); }
.match__club { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 0.82rem; }

.sheet { border-radius: 0; border: 1px solid var(--ink); border-bottom: 0; }
.sheet__close { border-radius: 0; border: 1px solid var(--ink); }
.avatar, .pdetail__face, .pdetail__initials { border-radius: 0; border: 1px solid var(--ink); }
.statgrid { border-radius: 0; border: 1px solid var(--ink); }
.statgrid__cell { background: var(--surface); }
.toast { border-radius: 0; background: var(--ink); color: var(--bg); }
.skeleton { border-radius: 0; }
.livebar { border-radius: 0; border: 1px solid var(--ink); }
.livebar__dot { background: var(--pg-err); }

/* Here --alert is the ink colour, not a warning -- the armband inverts with
   it. A closed deadline left on --alert comes out as ordinary body text and
   stops reading as a warning at all, so it takes the real error colour, the
   same one a negative score and an over-budget bank already use. */
.deadline__head,
.deadline__when.is-soon { color: var(--pg-err); }
.deadline--rolled { border-color: var(--pg-err); }
.ltag { border-radius: 0; background: var(--ink); color: var(--bg); border: 0; }
.guide__h, .guide__h3 { font-family: 'Playfair Display', serif; }

/* ------------------------------------------------ reclaiming light mode */

/* See the note in terrace.css. Counterparts to styles.css:926-950. */
:root[data-theme="light"] .topbar { background: var(--bg); }
:root[data-theme="light"] .tabbar { background: var(--bg); }
:root[data-theme="light"] .ice { background: var(--pg-plate); border-color: var(--ink); }
:root[data-theme="light"] .ice__tag { color: var(--primary); }
:root[data-theme="light"] .jsy__name { color: var(--ink); }
:root[data-theme="light"] .jsy__club { color: var(--ink-muted); }
:root[data-theme="light"] .jsy__badge { border-color: var(--pg-plate); }
:root[data-theme="light"] .jsy--empty .jsy__shirt { border-color: var(--line); }
:root[data-theme="light"] .jsy--empty .jsy__name,
:root[data-theme="light"] .jsy--empty .jsy__num { color: var(--ink-faint); }
:root[data-theme="light"] .jsy__pts--zero,
:root[data-theme="light"] .jsy__pts--price {
  background: transparent;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
}
:root[data-theme="light"] .jsy--out .jsy__name { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}