/* Terrace — a skin for the EIHL Fantasy front end.
 *
 * Design direction 7. Loaded after styles.css and inert until Theme picks it.
 *
 * Scene: not the rink, the stands. A banner someone painted on a bedsheet and
 * cable-tied to the barrier. Marker-black rules, hard edges, nothing soft or
 * rounded, because nothing in a hand-made banner is.
 *
 * Light is bone paper with black ink. Dark is the same banner under the
 * floodlights: black card, bone ink, the rules now drawn in bone rather than
 * black. Both grounds are designed, not inverted.
 *
 * The signature colour is the yellow, and it lives in --primary. A manager's
 * accent is written inline over --primary, so picking blue makes a blue
 * banner. Nothing below names the yellow literally — do not reintroduce one,
 * or the accent will skip it.
 *
 * The ten club colours are left exactly as clubs.py computed them.
 */

/* ------------------------------------------------------------- the bone */

:root[data-theme="light"] {
  --bg:          #f5f2e8;
  --surface:     #ffffff;
  --surface-2:   #ece6d8;
  --surface-3:   #ded7c4;

  --line:        #1b1b1b;   /* every rule is marker-black */
  --line-soft:   #c9c2ae;

  --ink:         #1b1b1b;
  --ink-muted:   #5f5a4e;   /* 6.1:1 on --bg */
  --ink-faint:   #6e6859;   /* 4.9:1 on --bg */

  --primary:     #ffdd00;
  --primary-dim: #e0c200;
  --primary-ink: #1b1b1b;   /* 12.8:1 on the yellow */
  --primary-wash: #ffdd00;

  --alert:       #c5361f;
  --alert-wash:  #f7dcd7;
  --tz-armband:  #c5361f;
  --warn:        #8a6100;

  /* Terrace-only, theme-dependent */
  --tz-ink-on-bar:   #f5f2e8;   /* text on the black top and tab bars */
  --tz-bar:          #1b1b1b;
  --tz-muted-on-bar: #a8a296;   /* 6.8:1 on --tz-bar */
  --tz-plate:        #ffffff;   /* the sheet the line-up is printed on */
  --tz-zero:         #ded7c4;   /* a nil score */
  --tz-zero-ink:     #5f5a4e;
  /* On the light ground applyAccent darkens the accent so it reads on pale
     surfaces — but this design puts the accent on black bars and score
     blocks too, where a darkened colour drops to 3:1. Lightened here for
     those places only. The default yellow only softens slightly. */
  --tz-accent-on-bar: color-mix(in oklab, var(--primary) 70%, #ffffff);
}

/* ------------------------------------------------- under the floodlights */

:root[data-theme="dark"] {
  --bg:          #121212;
  --surface:     #1c1c1c;
  --surface-2:   #262626;
  --surface-3:   #333333;

  /* Inverted: on black card the rules are drawn in bone. */
  --line:        #f5f2e8;
  --line-soft:   #3a3a3a;

  --ink:         #f5f2e8;
  --ink-muted:   #b5b0a4;   /* 8.7:1 on --bg */
  --ink-faint:   #949082;   /* 5.8:1 on --bg */

  --primary:     #ffdd00;
  --primary-dim: #d9bb00;
  --primary-ink: #1b1b1b;
  --primary-wash: #ffdd00;

  --alert:       #ff5a3d;
  --alert-wash:  #3a1610;
  --tz-armband:  #c02f2f;   /* --alert is too light to carry white text */
  --warn:        #e0a33c;

  --tz-ink-on-bar:   #f5f2e8;
  --tz-bar:          #000000;   /* the bars go darker than the page */
  --tz-muted-on-bar: #a8a296;
  --tz-plate:        #1c1c1c;
  --tz-zero:         #333333;
  --tz-zero-ink:     #b5b0a4;
  /* On the dark ground applyAccent already lightens, so it needs no help. */
  --tz-accent-on-bar: var(--primary);
}

:root {
  --radius-sm: 0px;
  --radius:    0px;
  --radius-lg: 0px;
  --shadow-1: none;
  --shadow-2: 4px 4px 0 var(--line);
  --tz-rule:       2px solid var(--line);
  --tz-rule-heavy: 4px solid var(--line);
}

/* ------------------------------------------------------------ the voice */

html, body {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
}

h1, h2, h3,
.bank__figure, .jsy__num, .match__score,
.statgrid__value, .livegame__score {
  font-family: 'Archivo Black', Archivo, sans-serif;
  font-weight: 400;          /* Archivo Black has one weight */
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 { font-size: 1.5rem; line-height: 1.02; }
h2 { font-size: 1.1rem; }
h3 { font-size: 0.92rem; }

/* Numbers are not shouted in caps — only words. */
.bank__figure, .jsy__num, .match__score,
.statgrid__value, .livegame__score, .num { text-transform: none; }

/* Archivo Black is wide and the topbar h1 is a single non-wrapping line: at
   1.5rem "Frozen Crew" clips to "FROZE…". Smaller here, and the gameweek
   pill abbreviates sooner to give the name back about 60px. */
.topbar h1 { font-size: 1.12rem; letter-spacing: -0.03em; }
@media (min-width: 430px) { .topbar h1 { font-size: 1.3rem; } }
@media (max-width: 430px) {
  .gw-pill__label { font-size: 0; }
  .gw-pill__label::before { content: "GW"; font-size: 0.75rem; }
}

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

.topbar {
  background: var(--tz-bar);
  border-bottom: var(--tz-rule-heavy);
  border-bottom-color: var(--tz-bar);
  backdrop-filter: none;
  padding: 11px 14px;
}
.topbar h1 { color: var(--tz-ink-on-bar); }
/* Scoped: app.js reuses .topbar__sub for muted captions all over the app, so
   an unscoped uppercase rule here turns league blurbs into shouted copy. */
.topbar .topbar__sub {
  color: var(--tz-muted-on-bar);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
/* The motto is a third line in a bar that already truncates two; at this
   width it only ever renders as "Still learning the offsid…". */
.topbar .motto { display: none; }

.gw-pill {
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 0;
  color: var(--primary-ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gw-pill b { color: var(--primary-ink); }
.topbar .gw-pill:hover { background: var(--primary-dim); }

.help-btn {
  border: 2px solid var(--tz-ink-on-bar);
  border-radius: 0;
  background: transparent;
  color: var(--tz-ink-on-bar);
}
/* styles.css uses var(--primary) for hover inside the bar; on the black bar
   that is fine for the yellow default but not for a dark accent, so the
   hover is stated against the bar's own ink. */
.topbar .help-btn:hover,
.topbar .help-btn:focus-visible {
  color: var(--tz-accent-on-bar);
  border-color: var(--tz-accent-on-bar);
  background: transparent;
}

.identity .avatar {
  border-radius: 0;
  border: 2px solid var(--tz-ink-on-bar);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: 'Archivo Black', sans-serif;
}

.live-badge {
  background: var(--alert);
  color: #ffffff;
  border-radius: 0;
  border: 2px solid var(--alert);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------- the tab bar */

.tabbar {
  background: var(--tz-bar);
  border-top: var(--tz-rule-heavy);
  border-top-color: var(--tz-bar);
  backdrop-filter: none;
}
.tabbar button {
  color: var(--tz-muted-on-bar);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.tabbar button[aria-selected="true"],
.tabbar button[aria-selected="true"] svg { color: var(--tz-accent-on-bar); }

/* ------------------------------------------------------------- the ice */

/* Not ice any more — a sheet of paper with the line-up marked on it. */
.ice {
  background: var(--tz-plate);
  border: var(--tz-rule-heavy);
  border-radius: 0;
  padding: 0 0 14px;
}
/* The rink furniture belonged to the cold-rink concept; a banner has none. */
.ice__markings { display: none; }

.ice__unit { margin-bottom: 0; }
/* Pinned to the bar colour, not --line: --line inverts to bone on the dark
   ground, which turned this into a bone strip with a yellow count on it at
   1.2:1. The tag is a dark bar with bone text in both grounds. */
.ice__tag {
  background: var(--tz-bar);
  color: var(--tz-ink-on-bar);
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  justify-content: flex-start;
}
.ice__tag i { color: var(--tz-accent-on-bar); opacity: 1; font-weight: 700; }
.ice__row { gap: 5px; padding: 0 8px 14px; }

/* --------------------------------------------------------- the jerseys */

/* 58px + a 5px gap fits a five-man forward line on one row inside the 327px
   of usable width at 375px. The stock 76px wrapped it 3 + 2, which reads as
   two lines of forwards rather than one. */
.jsy { width: 58px; }
.jsy:hover { transform: none; }
.jsy__shirt {
  width: 50px; height: 50px;
  /* Square block, not a shirt silhouette: a banner is cut with scissors. */
  clip-path: none;
  border: 2px solid var(--line);
}
.jsy:hover .jsy__shirt { filter: none; box-shadow: 3px 3px 0 var(--line); }
.jsy__num { font-size: 1.35rem; text-shadow: none; }
.jsy__name {
  font-weight: 700;
  /* The one place in this skin that is not set in capitals. The tile is 58px
     wide and NORDSTROM needs 72 of them; shrinking it far enough to fit is
     illegible, and breaking it mid-word is worse. In mixed case the widest
     surname in the league measures 55px and fits as it stands. */
  letter-spacing: -0.01em;
  font-size: 0.68rem;
}
.jsy__club {
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.56rem;
}

/* A score is a black block with the signature colour on it. */
.jsy__pts {
  border-radius: 0;
  background: var(--line);
  color: var(--tz-accent-on-bar);
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 0.76rem;
  min-width: 32px;
  padding: 1px 7px;
}
.jsy__pts--zero  { background: var(--tz-zero); color: var(--tz-zero-ink); }
.jsy__pts--neg   { background: var(--alert); color: #ffffff; }
.jsy__pts--price { background: var(--tz-zero); color: var(--tz-zero-ink); }

/* Did not play. The stock 45% opacity was built for a near-black ground; on
   bone it turns a club's colour into pastel, which reads as a different club
   rather than a quiet one. Drain the colour instead of the contrast. */
.jsy--out { opacity: 1; }
.jsy--out .jsy__shirt { filter: grayscale(0.85) contrast(0.9); }
.jsy--out .jsy__name { color: var(--ink-muted); }
.jsy--out .jsy__club { color: var(--ink-faint); }

.jsy--empty .jsy__shirt {
  border: 2px dashed var(--line);
  clip-path: none;
  background: transparent;
}
.jsy--empty .jsy__num { color: var(--ink-faint); }

.jsy__badge {
  border-radius: 0;
  border: 2px solid var(--tz-plate);
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
}
.jsy__badge--c { background: var(--tz-armband); color: #ffffff; }
.jsy__badge--v { background: var(--tz-bar); color: var(--tz-accent-on-bar); }

/* ---------------------------------------------------------- the budget */

.bank {
  background: var(--primary);
  border: var(--tz-rule-heavy);
  border-color: var(--primary);
  border-radius: 0;
  padding: 12px 14px;
}
.bank__figure { color: var(--primary-ink); font-size: 2.1rem; }
.bank__figure.is-over { color: var(--alert); }
.bank__unit, .bank__stat span, .bank__note {
  color: var(--primary-ink);
  opacity: 0.78;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.bank__note { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }
.bank__stat b {
  color: var(--primary-ink);
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
}
.bank__track { background: rgba(0, 0, 0, 0.22); border-radius: 0; height: 7px; }
.bank__fill { background: var(--primary-ink); border-radius: 0; }
.bank__fill.is-over { background: var(--alert); }
.bank__note.is-over { color: var(--alert); opacity: 1; }

/* ----------------------------------------------------------- the parts */

.card, .note, .sheet, .statgrid, .statgrid__cell, .livebar, .livegame {
  border-radius: 0;
}
.card { background: var(--surface); border: var(--tz-rule); }
.note { border: var(--tz-rule); background: var(--surface); }
.note--good { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.note--bad  { background: var(--alert); border-color: var(--alert); color: #ffffff; }

.btn {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.btn:hover:not(:disabled) { background: var(--primary); color: var(--primary-ink); }
.btn:active:not(:disabled) { transform: none; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.25); }
.btn--primary {
  /* --tz-armband, not --alert: --alert lifts on the dark ground and white on
     it measures 3.1:1. This red is chosen to carry white on both. */
  background: var(--tz-armband);
  color: #ffffff;
  border-color: var(--line);
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
}
.btn--primary:hover:not(:disabled) { background: var(--tz-armband); filter: brightness(0.88); color: #ffffff; }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn.is-on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn--wide { padding: 13px; }

.chip, .field, .segmented, .guide__chip, .guide__navlink {
  border-radius: 0;
  border: 2px solid var(--line);
}
.chip { background: var(--surface); color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.chip:hover { background: var(--primary); color: var(--primary-ink); }
.chip--clear { background: var(--primary); color: var(--primary-ink); }
.guide__navlink { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.guide__navlink:hover { background: var(--primary); color: var(--primary-ink); border-color: var(--line); }

.field { background: var(--surface); }
.field input, .field select { color: var(--ink); font-weight: 600; }
.field input::placeholder { color: var(--ink-faint); }
.field:focus-within { border-color: var(--alert); box-shadow: 2px 2px 0 var(--alert); }
/* The heavier border pushed each select past half the row, so the four
   filters wrapped one-per-row and shoved the player list a screen down. */
.filters > .field:not(.field--search) { flex: 1 1 calc(50% - 3px); min-width: 0; }
.filters > .field select { min-width: 0; }

.segmented { background: var(--surface); padding: 0; gap: 0; }
.segmented button {
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 9px 12px;
}
.segmented button + button { border-left: 2px solid var(--line); }
.segmented button[aria-selected="true"] { background: var(--primary); color: var(--primary-ink); }

/* The Look and Theme pickers in the profile sheet. */
.seg-theme button {
  border-radius: 0;
  border: 2px solid var(--line);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.seg-theme button[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--primary);
  color: var(--primary-ink);
}
.field--stack input { border-radius: 0; border: 2px solid var(--line); }
.field--stack input:focus { border-color: var(--alert); }

.pos-chip {
  border-radius: 0;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  border: 1px solid var(--line);
}
.pos-chip--G { background: var(--primary); color: var(--primary-ink); }
.pos-chip--D { background: var(--line); color: var(--bg); }
.pos-chip--F { background: var(--surface); color: var(--ink); }

/* ------------------------------------------------------ the player list */

.plist { gap: 0; background: transparent; }
.prow { background: var(--surface); border-bottom: var(--tz-rule); }
.prow:hover { background: var(--primary); }
.prow--in { background: var(--primary); }
.prow--in:hover { background: var(--primary-dim); }
.prow__face { border-radius: 0; border: 2px solid var(--line); }
.prow__name { font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.prow__meta { color: var(--ink-muted); font-weight: 600; }
/* Points per game decides a pick; price is a constraint. Swap their weight. */
.prow__price { font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); }
.prow__ppg { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.prow__tick { color: var(--primary-ink); font-family: 'Archivo Black', sans-serif; }
/* The picked row is the accent now, not a dark wash, so the greys that sat
   on near-black no longer clear 4.5:1 against it. */
.prow--in .flag,
.prow--in .prow__meta,
.prow--in .prow__price,
.prow--in .prow__name,
.prow--in .prow__ppg { color: var(--primary-ink); }

/* --------------------------------------------------------- the tables */

.table th {
  background: var(--line);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.64rem;
  padding: 7px 10px;
}
.table td { border-bottom: var(--tz-rule); }
.table tbody tr.is-me { background: var(--primary); color: var(--primary-ink); }
.table tbody tr.is-me td { color: var(--primary-ink); }

/* --------------------------------------------------------- the matches */

.daygroup__day {
  background: var(--line);
  color: var(--bg);
  padding: 4px 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.64rem;
}
.match { background: var(--surface); border: var(--tz-rule); border-radius: 0; }
/* The club dot was 8px of the one thing that identifies a club. Make it a
   full-height bar instead. */
.match__dot { width: 6px; height: 30px; border-radius: 0; border: 1px solid var(--line); }
/* Uppercase is wider than mixed case and these names already truncated
   before the reskin, so buy the space back with tighter size and tracking. */
.match__club {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.76rem;
}
.match__time { color: var(--ink); font-weight: 700; }
.match__meta { color: var(--ink-muted); font-weight: 600; }
.match__star b { color: var(--ink); }
.matchlist { gap: 6px; }

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

.sheet { border: var(--tz-rule-heavy); border-bottom: 0; }
.sheet__grip { background: var(--line); }
.sheet__close { border-radius: 0; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.sheet__close:hover { background: var(--primary); color: var(--primary-ink); }
.toast { border: var(--tz-rule); border-radius: 0; background: var(--line); color: var(--bg); }
.toast--bad { background: var(--alert); border-color: var(--alert); color: #ffffff; }

.skeleton { border-radius: 0; }
.avatar, .avatar--initials, .pdetail__face, .pdetail__initials {
  border-radius: 0; border: 2px solid var(--line);
}
.statgrid { border: var(--tz-rule); gap: 2px; background: var(--line); }
.statgrid__cell { background: var(--surface); }
.statgrid__label { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.livebar { border: var(--tz-rule); background: var(--surface); }
.livebar__dot { background: var(--alert); border-radius: 0; }
.livegame { border: 1px solid var(--line); background: var(--bg); }

.ltag { border-radius: 0; background: var(--line); color: var(--tz-accent-on-bar); border: 0; font-weight: 700; }
.empty h2 { color: var(--ink); }

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

/* styles.css adapts the classic design to a light page in a block guarded by
   :root[data-theme="light"], which keeps the rink dark on purpose. At
   (0,3,0) that block beats the plain selectors above, so these restate the
   same declarations at equal specificity, later in the cascade. Every
   selector here has a counterpart at styles.css:926-950 — if that block
   grows, this one needs the same line. */
:root[data-theme="light"] .topbar { background: var(--tz-bar); }
:root[data-theme="light"] .tabbar { background: var(--tz-bar); }
:root[data-theme="light"] .ice {
  background: var(--tz-plate);
  border-color: var(--line);
}
:root[data-theme="light"] .ice__tag { color: var(--tz-ink-on-bar); }
: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(--tz-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: var(--tz-zero); color: var(--tz-zero-ink);
}
:root[data-theme="light"] .jsy--out .jsy__name { color: var(--ink-muted); }

/* Focus has to survive on bone and on black. */
:focus-visible { outline: 3px solid var(--alert) !important; outline-offset: 2px !important; }
.topbar :focus-visible, .tabbar :focus-visible { outline-color: var(--tz-accent-on-bar) !important; }

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