:root { --gap:.9rem; --radius:.6rem; --muted:#666; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; line-height:1.35; }

.container { padding: 1rem; }
.site-head, .site-foot { background:#fafafa; border-bottom:1px solid #eee; }
.site-foot { border-top:1px solid #eee; border-bottom:none; padding: .75rem 1rem; }
.site-head .nav { display:flex; gap:1rem; padding:.75rem 1rem; }
.site-head .nav a { text-decoration:none; color:#222; }
.site-head .nav a:hover { text-decoration:underline; }

.controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.8rem 0; }
.controls form input[type="date"] { padding:.35rem .5rem; border:1px solid #ccc; border-radius:.4rem; }
.controls form button { padding:.4rem .7rem; border:1px solid #ccc; border-radius:.4rem; background:#f7f7f7; cursor:pointer; }
.controls .src { margin-left:auto; font-size:.9em; opacity:.8; text-decoration:none; }

.summary { font-size:.95em; opacity:.9; margin-bottom:.5rem; }

.league { margin-bottom: 1.2rem; }
.table-wrap { overflow-x:auto; background:#fff; border:1px solid #e7e7e7; border-radius: var(--radius); }
table { border-collapse:collapse; width:100%; min-width:560px; }
thead th { background:#f5f5f5; text-align:left; padding:.55rem .6rem; border-bottom:1px solid #e7e7e7; }
tbody td { padding:.5rem .6rem; border-top:1px solid #efefef; vertical-align: middle; }
tbody tr:nth-child(even) td { background:#fafafa; }
.t { white-space:nowrap; font-variant-numeric: tabular-nums; }
.score { font-weight:600; text-align:center; font-variant-numeric: tabular-nums; }
.home, .away { white-space:nowrap; }
.meta { color:#666; font-size:.9em; }

.badge { display:inline-block; padding:.15rem .4rem; border-radius:.4rem; font-size:.8em; line-height:1; border:1px solid transparent; }
.badge-live { background:#fff7e6; border-color:#ffe0a3; }
.badge-finished { background:#eaf9ea; border-color:#bde5bd; }
.badge-scheduled { background:#eef2ff; border-color:#c7d2fe; }
.badge-disrupted { background:#fdecec; border-color:#f5bcbc; }

.mono { font-family: ui-monospace,Menlo,Consolas,monospace; }
.small { font-size:.9em; }
.muted { color: var(--muted); }
.api-ep { margin:.5rem 0 1rem; }

/* Key-value tables used in areas/area pages */
table.kv {
  border-collapse: collapse;
  width: auto;
  margin-bottom: 1rem;
}
table.kv th {
  text-align: left;
  padding: .4rem .6rem;
  background: #f7f7f7;
  border: 1px solid #ddd;
  white-space: nowrap;
}
table.kv td {
  padding: .4rem .6rem;
  border: 1px solid #ddd;
}


/* Flags in area pages: keep them tiny and consistent */
.flag {
  display: inline-block;
  height: 18px;     /* fixed, reliable for SVGs */
  width: auto;      /* preserve aspect ratio */
  max-width: 32px;  /* hard cap if a weird aspect tries to expand */
  vertical-align: text-bottom;
}