/* ==========================================================================
   FollowSquash styles: "Court" theme.
   Change the look by editing the variables (design tokens) in :root below.
   Every colour, size and spacing value in this file comes from them.
   See them all rendered at /design.
   ========================================================================== */

:root {
  /* Brand */
  --color-brand: #12284a;          /* navy: header, headings accents */
  --color-brand-strong: #0b1b33;
  --color-accent: #ef6c1a;         /* squash-ball orange: primary buttons, active states */
  --color-accent-strong: #c9530b;
  --color-accent-soft: #fdeee3;
  --color-on-brand: #ffffff;
  --color-on-accent: #ffffff;
  --color-on-brand-muted: rgb(255 255 255 / 0.8);  /* secondary text on the navy header and panels */
  --color-on-brand-hover: rgb(255 255 255 / 0.1);  /* hover background on navy */
  --color-up-on-brand: #6ee7a4;
  --color-down-on-brand: #ffb0a8;

  /* Surfaces and text */
  --color-bg: #eef1f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8fb;    /* table headers, hovered rows */
  --color-border: #dbe1e8;
  --color-text: #17202c;
  --color-muted: #5d6a7a;
  --color-link: #1f5bb5;
  --color-selected: #12284a;       /* selected tab */

  /* Meaning */
  --color-live: #e02b2b;
  --color-up: #17864a;
  --color-down: #c7342b;
  --color-favourite: #f2b705;      /* followed players: stars and "your players" flags */
  --color-favourite-soft: #fff6d6;
  --color-on-favourite: #17202c;   /* text on the gold favourite colour, in both themes */
  --color-on-favourite: #3a2a00;
  --color-on-live: #ffffff;

  /* Tournament levels (rows get a coloured edge, levels a coloured chip) */
  --level-major: #6b2bd9;          /* Diamond, World Championships */
  --level-platinum: #3d6e8f;
  --level-gold: #c79100;
  --level-silver: #7d8a99;
  --level-bronze: #9a5a2c;
  --level-copper: #e0773a;
  --level-challenger: #0e8a8c;
  --level-satellite: #4a8a3a;
  --level-other: #8a8f98;          /* national, junior, federation events */
  --color-on-level: #ffffff;       /* text on level chips */

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.45rem;
  --text-2xl: 1.9rem;
  --weight-heading: 800;

  /* Space, shape, depth */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(18 40 74 / 0.06), 0 6px 16px rgb(18 40 74 / 0.07);
  --shadow-raised: 0 2px 4px rgb(18 40 74 / 0.08), 0 10px 24px rgb(18 40 74 / 0.12);
  --page-width: 64rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-brand: #0a1628;
    --color-brand-strong: #060f1d;
    --color-accent: #ff8a3d;
    --color-accent-strong: #ffa466;
    --color-accent-soft: rgb(255 138 61 / 0.16);
    --color-bg: #0e1726;
    --color-surface: #162236;
    --color-surface-alt: #1c2a42;
    --color-border: #2a3b56;
    --color-text: #e7edf5;
    --color-muted: #9cadc2;
    --color-link: #84b4ff;
    --color-selected: #ff8a3d;
    --color-live: #ff5555;
    --color-up: #4fd18b;
    --color-down: #ff7a70;
    --color-favourite: #ffcc33;
    --color-favourite-soft: rgb(255 204 51 / 0.14);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.25);
    --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 24px rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;            /* keeps the footer at the bottom on short pages */
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-base) / 1.5 var(--font-body);
}
a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-strong); }
main { flex: 1; width: 100%; max-width: var(--page-width); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: 1.2; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
h2 {
  font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--color-accent); }
h3 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.muted { color: var(--color-muted); }
.empty { color: var(--color-muted); padding: var(--space-6) 0; text-align: center; }
.prose { max-width: 42rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Header and footer ---------- */
.site-header {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center;
  padding: var(--space-3) max(var(--space-4), calc((100% - var(--page-width)) / 2 + var(--space-4)));
  background: var(--color-brand); color: var(--color-on-brand);
  border-bottom: 3px solid var(--color-accent);
}
.brand { font-weight: 900; font-size: var(--text-lg); color: var(--color-on-brand); text-decoration: none; letter-spacing: -0.01em; }
.brand span { color: var(--color-accent); }
.site-header nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.site-header nav a {
  color: var(--color-on-brand-muted); text-decoration: none; font-weight: 600;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.site-header nav a:hover { color: var(--color-on-brand); background: var(--color-on-brand-hover); }
.site-header nav a[aria-current] { color: var(--color-on-accent); background: var(--color-accent); }
.site-header .account { margin-left: auto; display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.site-header .account a, .site-header .account button.link { color: var(--color-on-brand-muted); }
.site-header .account form { margin: 0; }
.site-footer {
  padding: var(--space-4) max(var(--space-4), calc((100% - var(--page-width)) / 2 + var(--space-4)));
  font-size: var(--text-sm); color: var(--color-muted);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}

/* ---------- Cards and tables ---------- */
.card, .table-wrap {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.card { padding: var(--space-4); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted); font-weight: 700; background: var(--color-surface-alt);
}
tbody tr:hover td { background: var(--color-surface-alt); }
tbody tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---------- Buttons and forms ---------- */
/* :where() keeps these selectors weak, so .btn-secondary etc. can override them. */
.btn, :where(form) button:where([type="submit"]:not(.link, .star)) {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-on-accent);
}
.btn:hover, :where(form) button:where([type="submit"]:not(.link, .star)):hover {
  background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-on-accent);
}
.btn-secondary, .btn-secondary:hover, form button.following {
  background: var(--color-surface); color: var(--color-accent); border-color: var(--color-accent);
}
.btn-danger, form button.danger { background: var(--color-down); border-color: var(--color-down); }
button.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--color-link);
  text-decoration: underline; cursor: pointer;
}
input[type="email"], input[type="password"], input[type="search"], select {
  font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent); outline-offset: 2px;
}
form.stack { display: flex; flex-direction: column; gap: var(--space-3); max-width: 24rem; }
form.stack label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; }
label.check { display: inline-flex; gap: var(--space-2); align-items: center; cursor: pointer; }
label.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-accent); margin: 0; }
.notice {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-accent-soft); border-left: 4px solid var(--color-accent);
}

/* Filter bar above lists */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: end;
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.filters > label:not(.check) {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted);
}
.filters > label:not(.check) input, .filters > label:not(.check) select { font-size: var(--text-base); text-transform: none; letter-spacing: normal; }
.filters .checks { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-2); }
.filters .checks label.check { font-weight: 600; }
.js .filters .js-hide { display: none; }

/* Pill tabs */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tabs a {
  padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  text-decoration: none; color: var(--color-text); background: var(--color-surface); font-weight: 600;
}
.tabs a:hover { border-color: var(--color-accent); }
.tabs a[aria-current] { background: var(--color-selected); border-color: var(--color-selected); color: var(--color-on-brand); }
.tabs a.fav { background: var(--color-favourite-soft); border-color: var(--color-favourite); }
.tabs a.fav[aria-current] { background: var(--color-favourite); border-color: var(--color-favourite); color: var(--color-on-favourite); }

.pager { display: flex; gap: var(--space-4); justify-content: center; align-items: center; margin-top: var(--space-4); color: var(--color-muted); }
.back-link { display: inline-block; margin-bottom: var(--space-3); font-weight: 600; text-decoration: none; }

/* ---------- Following ---------- */
form.follow { display: inline; margin: 0; }
form.follow button.star {
  cursor: pointer; background: none; border: 0; padding: var(--space-1);
  font-size: 1.45rem; line-height: 1; color: var(--color-muted); border-radius: var(--radius-sm);
  transition: transform 0.1s ease, color 0.1s ease, background 0.1s ease;
}
form.follow button.star:hover { color: var(--color-favourite); background: var(--color-favourite-soft); transform: scale(1.15); }
form.follow button.star.on { color: var(--color-favourite); }
.fav-flag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 800; padding: 0.1rem var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-favourite); color: var(--color-on-favourite); white-space: nowrap;
}
tr.has-fav td { background: var(--color-favourite-soft); }

/* ---------- Badges, chips, ranking movement ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.1rem var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); color: var(--color-muted);
}
.badge.live { background: var(--color-live); border-color: var(--color-live); color: var(--color-on-live); }
.badge.live::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-on-live);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } }
.gender-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 800; width: 1.4rem; text-align: center;
  border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-muted);
}
.change { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.change.up { color: var(--color-up); }
.change.down { color: var(--color-down); }
.change.same { color: var(--color-muted); }

/* Tournament levels: set --lvl, then chips and rows use it */
.lvl-major { --lvl: var(--level-major); }
.lvl-platinum { --lvl: var(--level-platinum); }
.lvl-gold { --lvl: var(--level-gold); }
.lvl-silver { --lvl: var(--level-silver); }
.lvl-bronze { --lvl: var(--level-bronze); }
.lvl-copper { --lvl: var(--level-copper); }
.lvl-challenger { --lvl: var(--level-challenger); }
.lvl-satellite { --lvl: var(--level-satellite); }
.lvl-other { --lvl: var(--level-other); }
.chip {
  display: inline-block; font-size: var(--text-xs); font-weight: 800; white-space: nowrap;
  padding: 0.1rem var(--space-2); border-radius: var(--radius-pill);
  background: var(--lvl, var(--level-other)); color: var(--color-on-level);
}
tr[class*="lvl-"] td:first-child { box-shadow: inset 5px 0 0 var(--lvl); }

/* ---------- Live tournaments ---------- */
.live-now { border-top: 4px solid var(--color-live); }
.live-now h2 { margin-top: 0; }
.live-now .table-wrap { box-shadow: none; }
.live-now h2::before { background: var(--color-live); }
.watch, a.watch-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-live); color: var(--color-on-live); text-decoration: none; font-weight: 700; font-size: var(--text-sm);
}
.watch { padding: var(--space-2) var(--space-4); font-size: var(--text-base); margin-bottom: var(--space-4); }
.watch:hover, a.watch-link:hover { color: var(--color-on-live); filter: brightness(1.1); }
.tournament-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tournament-links .watch { margin-bottom: 0; }
a.official-link { font-weight: 600; }

/* ---------- Player page ---------- */
.player-head {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
  padding: var(--space-5); border-radius: var(--radius); color: var(--color-on-brand);
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-strong));
  box-shadow: var(--shadow-raised);
}
.player-head h1 { margin: 0 0 var(--space-1); }
.player-head p { margin: var(--space-1) 0; }
.player-head a { color: var(--color-on-brand); }
.big-rank { font-size: var(--text-xl); font-weight: 900; }
.big-rank .change { font-size: var(--text-sm); }
.player-head .change.up { color: var(--color-up-on-brand); }
.player-head .change.down { color: var(--color-down-on-brand); }

/* ---------- Tournament page ---------- */
.facts {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-4);
  padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
}
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: 700; }
.facts dd { margin: 0; font-weight: 600; }
.round { margin-bottom: var(--space-5); }
.matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-2); }
.match {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-card);
}
.match .side { display: flex; justify-content: space-between; gap: var(--space-2); }
.match.fav { background: var(--color-favourite-soft); border-color: var(--color-favourite); box-shadow: inset 4px 0 0 var(--color-favourite), var(--shadow-card); }
.fav-star { color: var(--color-favourite); }
.match .side.winner { font-weight: 800; }
.match .side.winner span:last-child { color: var(--color-accent-strong); }
.match .scores { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: var(--text-sm); }
.match .when { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }
.seed { color: var(--color-muted); font-size: 0.85em; }

/* ---------- Match lists (player, My players) ---------- */
.match-list {
  list-style: none; padding: 0; margin: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.match-list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.match-list li:last-child { border-bottom: 0; }

/* Date-first match rows: when (or result) on the left, who and where on the right */
.match-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4); align-items: center; }
.when-col { display: flex; flex-direction: column; gap: 0.1rem; }
.when-col .day { font-weight: 800; color: var(--color-accent-strong); }
.when-col .time { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.when-col .time .muted { font-size: var(--text-xs); font-weight: 600; }
.when-col .viewer-time, .when-col .tbc { font-size: var(--text-xs); color: var(--color-muted); }
.when-col .result {
  align-self: flex-start; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 0.05rem var(--space-2); border-radius: var(--radius-sm); color: var(--color-on-live);
}
.when-col .result.won { background: var(--color-up); }
.when-col .result.lost { background: var(--color-down); }
.what-col .players { font-size: var(--text-base); }
.what-col .players a { font-weight: 700; text-decoration: none; }
.what-col .meta { font-size: var(--text-sm); color: var(--color-muted); margin-top: 0.1rem; }
.what-col .meta a { color: var(--color-muted); }
.what-col .scores { font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .match-row { grid-template-columns: 6.5rem 1fr; gap: var(--space-3); } }
.viewer-time { color: var(--color-muted); }

/* ---------- Signed-out intro ---------- */
.intro {
  padding: var(--space-6) var(--space-5); border-radius: var(--radius); color: var(--color-on-brand);
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-strong));
  box-shadow: var(--shadow-raised);
}
.intro h1 { font-size: var(--text-2xl); }
.intro p { max-width: 36rem; color: var(--color-on-brand-muted); }
.intro .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.intro .btn-secondary { background: transparent; color: var(--color-on-brand); border-color: var(--color-on-brand-muted); }

/* ---------- Design page ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); }
.swatch { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.swatch div { height: 3rem; }
.swatch code { display: block; padding: var(--space-2); font-size: var(--text-xs); }
.design-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-3) 0; }

/* ---------- Admin ---------- */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.admin-tile { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: var(--color-text); }
.admin-tile:hover { border-color: var(--color-accent); color: var(--color-text); }
.admin-tile strong { font-size: var(--text-lg); }
fieldset.perm-boxes { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
fieldset.perm-boxes legend { font-weight: 700; padding: 0 var(--space-1); }
form.stack.card { max-width: 36rem; }
form.edit-form { display: grid; grid-template-columns: 10rem 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; max-width: 52rem; }
form.edit-form label { font-weight: 600; }
form.edit-form input[type="text"], form.edit-form input[type="url"], form.edit-form input[type="date"], form.edit-form select {
  font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); width: 100%;
}
form.edit-form .override { font-size: var(--text-xs); color: var(--color-muted); }
form.edit-form .actions { grid-column: 1 / -1; }
.inline-form { display: inline; margin: 0; }

a.video-link { color: var(--color-live); font-weight: 700; text-decoration: none; white-space: nowrap; }
a.video-link:hover { text-decoration: underline; color: var(--color-live); }
.video-note { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Suggestions ---------- */
.suggest { margin-top: var(--space-6); }
details.suggest-form { margin-bottom: var(--space-3); }
details.suggest-form > summary { cursor: pointer; font-weight: 600; color: var(--color-link); padding: var(--space-1) 0; }
details.suggest-form > summary:hover { text-decoration: underline; }
details.suggest-form[open] > summary { margin-bottom: var(--space-2); }
.site-header nav .count {
  display: inline-block; min-width: 1.3em; padding: 0 0.35em; margin-left: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-favourite); color: var(--color-on-favourite);
  font-size: var(--text-sm); font-weight: 700; text-align: center; line-height: 1.4;
}
.suggestion-list { display: grid; gap: var(--space-3); }
.suggestion p { margin: var(--space-2) 0; }
.suggestion-url { word-break: break-all; font-weight: 600; }
.suggestion blockquote { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border); background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.suggestion-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.suggestion-actions .inline-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.suggestion-actions input[type="text"] { min-width: 16rem; }

/* ---------- Player photos ---------- */
.player-photo { margin: 0; width: 9rem; flex: none; }
.player-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius-sm); border: 3px solid var(--color-on-brand-muted);
}
.player-photo figcaption { margin-top: var(--space-1); font-size: 0.75rem; line-height: 1.3; color: var(--color-on-brand-muted); overflow-wrap: anywhere; }
.player-photo figcaption a { color: inherit; }
.player-head .player-info { flex: 1 1 14rem; }
.suggestion-photo { display: block; max-width: 12rem; max-height: 16rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin: var(--space-2) 0; }
@media (max-width: 30rem) { .player-photo { width: 7rem; } }

/* ---------- Sign in ---------- */
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); align-items: start; }
.auth-grid h2 { margin-top: 0; }
.auth-grid label .muted, .stack label .muted { display: block; font-weight: 400; font-size: var(--text-sm); }
form.narrow { max-width: 26rem; }