/* Form guide — a skin for the EIHL Fantasy front end.
 *
 * Design direction 8. Loaded after styles.css and inert until Theme picks it.
 *
 * Scene: the manager who actually optimises. Quiet, dense, monospaced
 * numbers, everything aligned to a column so two players can be compared by
 * eye without reading. No decoration that is not a value.
 *
 * Dark is the terminal at night; light is the same sheet printed out. Both
 * are near-neutral on purpose — the one colour on screen is the manager's.
 *
 * The signature colour is the teal, and it lives in --primary so a chosen
 * accent replaces it. Nothing below names a teal literally.
 */

:root[data-theme="dark"] {
  --bg:          #0f1416;
  --surface:     #151d20;
  --surface-2:   #1c2529;
  --surface-3:   #253034;

  --line:        #253034;
  --line-soft:   #1a2326;

  --ink:         #e9eef0;
  --ink-muted:   #8c9aa0;   /* 6.4:1 on --bg */
  --ink-faint:   #74838a;   /* 4.7:1 on --bg */

  --primary:     #4cc9c0;
  --primary-dim: #3aa79f;
  --primary-ink: #06201e;
  --primary-wash: rgba(76, 201, 192, 0.13);

  --alert:       #ff6b6b;
  --alert-wash:  rgba(255, 107, 107, 0.14);
  --warn:        #e0a33c;

  --fg-rule:    1px solid #1a2326;
  --fg-armband: #c02f2f;   /* --alert cannot carry white text */
  --fg-pos-g:   #e8b45c;
  --fg-pos-d:   #93c3e6;
}

:root[data-theme="light"] {
  --bg:          #f3f5f6;
  --surface:     #ffffff;
  --surface-2:   #e8ecee;
  --surface-3:   #dae0e3;

  --line:        #d4dadd;
  --line-soft:   #e6eaec;

  --ink:         #0f1416;
  --ink-muted:   #55646b;   /* 6.6:1 on --bg */
  --ink-faint:   #5c6a71;   /* 5.1:1 on --bg; #66757c measured 4.36 */

  --primary:     #0f7a72;   /* the same teal, darkened for a pale sheet */
  --primary-dim: #0b625b;
  --primary-ink: #ffffff;
  --primary-wash: rgba(15, 122, 114, 0.12);

  --alert:       #c0392b;
  --alert-wash:  rgba(192, 57, 43, 0.12);
  --warn:        #8a6100;

  --fg-rule:    1px solid #e6eaec;
  --fg-armband: #b52d2d;
  --fg-pos-g:   #7a5200;
  --fg-pos-d:   #1f5a8a;
}

:root {
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --shadow-1: none;
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.25);
}

html, body {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
}

/* Every number is monospaced and tabular, so columns line up down the page
   and a difference reads as a difference in shape, not just in digits. */
.num, .jsy__num, .jsy__pts, .bank__figure, .bank__stat b,
.match__score, .match__time, .statgrid__value, .livegame__score,
.prow__price, .prow__ppg, .table td, .form-row__pts, .form-row__date {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 1.16rem; }

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

.topbar { background: var(--bg); border-bottom: 1px solid var(--line); }
/* Scoped: app.js reuses .topbar__sub for muted captions throughout. */
.topbar .topbar__sub {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-muted);
  font-size: 0.64rem;
  letter-spacing: 0;
}
.topbar .motto { display: none; }   /* a form guide has no room for a joke */

.gw-pill {
  font-family: 'IBM Plex Mono', monospace;
  border-radius: 4px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 500;
}
.identity .avatar { border-radius: 4px; }

.tabbar { background: var(--bg); border-top: 1px solid var(--line); }
.tabbar button { font-size: 0.66rem; font-weight: 500; }

/* ------------------------------------------------------------- the bank */

/* One line of numbers, not a panel: the squad is what matters here. */
.bank {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 2px 12px;
}
.bank__figure { font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.bank__unit, .bank__stat span {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-muted);
  font-size: 0.6rem;
  letter-spacing: 0;
  text-transform: none;
}
.bank__stat b { font-size: 0.95rem; font-weight: 500; }
.bank__track { height: 2px; background: var(--surface-3); }
.bank__note { font-size: 0.68rem; color: var(--ink-muted); }

/* --------------------------------------------------- the squad, as a table */

.ice { background: transparent; border: 0; border-radius: 0; padding: 0; }
.ice__markings { display: none; }

.ice__unit { margin-bottom: 0; }
.ice__tag {
  justify-content: flex-start;
  padding: 10px 2px 4px;
  margin-bottom: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.ice__tag i { color: var(--ink-faint); opacity: 1; }

/* Rows, aligned to columns. .jsy's children are shirt, badge, name, club,
   points in that order, which is already the column order a table wants. */
.ice__row { flex-direction: column; gap: 0; align-items: stretch; }

.jsy {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
  border-bottom: var(--fg-rule);
  text-align: left;
  min-height: 40px;
}
.jsy:hover { transform: none; background: var(--surface); }

.jsy__shirt {
  width: 22px; height: 26px;
  clip-path: none;
  border-radius: 3px;
  background: var(--club, var(--surface-3));
  flex: 0 0 auto;
}
.jsy:hover .jsy__shirt { filter: none; }
.jsy__num { font-size: 0.68rem; font-weight: 600; text-shadow: none; }

.jsy__name {
  flex: 1 1 auto;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 500;
  max-width: none;
  /* This skin gives the name a full row, so one line is enough. Back to a
     plain block: the clamp box from styles.css reserves a second line here
     for nothing and trims the descenders off the first. */
  display: block;
  min-height: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}
.jsy__club {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--ink-faint);
}
.jsy__pts {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: right;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 2px 7px;
}
/* --ink-faint on --surface-2 measures 4.0:1, under the 4.5 these need. */
.jsy__pts--zero  { background: var(--surface-2); color: var(--ink-muted); }
.jsy__pts--price { background: var(--surface-2); color: var(--ink-muted); }

/* Did not play. Dimming the whole row to 45% would take its caption below
   4.5:1, so the colour drains and the text stays. */
.jsy--out { opacity: 1; }
.jsy--out .jsy__shirt { filter: grayscale(0.9); }
.jsy--out .jsy__name { color: var(--ink-muted); }

.jsy--empty { min-height: 40px; justify-content: flex-start; }
.jsy--empty .jsy__shirt {
  clip-path: none;
  border: 1px dashed var(--line);
  border-radius: 3px;
  background: transparent;
}

.jsy__badge {
  position: static;
  width: 17px; height: 17px;
  border-radius: 3px;
  border: 0;
  flex: 0 0 auto;
  font-size: 0.58rem;
}
/* --alert is chosen to read as text on this ground; white sitting on it
   measures 2.7:1, so the armband takes a darker red (5.7:1). */
.jsy__badge--c { background: var(--fg-armband); color: #ffffff; }
.jsy__badge--v { background: var(--surface-3); color: var(--ink); }

/* styles.css tints these with the position hue at 22% and sets the text to
   the same hue, which lands at 4.2:1 for the goalie chip. */
.pos-chip--G { background: var(--surface-2); color: var(--fg-pos-g); }
.pos-chip--D { background: var(--surface-2); color: var(--fg-pos-d); }
.pos-chip--F { background: var(--primary-wash); color: var(--primary); }

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

.btn { border-radius: 6px; font-weight: 500; font-size: 0.86rem; }
.plist { gap: 0; }
.prow { border-bottom: var(--fg-rule); }
.prow__face { border-radius: 4px; }
.prow__name { font-weight: 500; }
/* The whole point of this look: form first, price last. */
.prow__price { font-size: 0.7rem; font-weight: 400; color: var(--ink-muted); }
.prow__ppg { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

.table th {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--surface);
  color: var(--ink-muted);   /* --ink-faint measured 4.4:1 here */
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.daygroup__day {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-faint);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}
.match__club { font-weight: 500; font-size: 0.82rem; }
.matchlist { gap: 4px; }
.card { background: var(--surface); }

/* ------------------------------------------------ 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: transparent; border-color: transparent; }
:root[data-theme="light"] .ice__tag { color: var(--ink-faint); }
:root[data-theme="light"] .jsy__name { color: var(--ink); }
:root[data-theme="light"] .jsy__club { color: var(--ink-faint); }
:root[data-theme="light"] .jsy__badge { border-color: transparent; }
: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(--surface-2); color: var(--ink-muted);
}
:root[data-theme="light"] .jsy--out .jsy__name { color: var(--ink-muted); }

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