:root {
  --bg: #0f1216; --fg: #e8eaed; --mut: #9aa4b2; --card: #171b21;
  --line: #262c35; --accent: #ff6b35; --chip: #222833;
  --maxw: 900px;
  color-scheme: dark;
}
/* Manual theme picked with the header toggle (remembered in localStorage).
   The attribute selector outvotes the plain :root above, so an explicit
   choice always wins; with no choice saved everyone gets the dark default,
   whatever the OS preference is. */
:root[data-theme="dark"] { --bg:#0f1216; --fg:#e8eaed; --mut:#9aa4b2; --card:#171b21;
          --line:#262c35; --chip:#222833; color-scheme: dark; }
:root[data-theme="light"] { --bg:#f7f8fa; --fg:#16181d; --mut:#5b6472; --card:#fff;
          --line:#e3e6eb; --chip:#eef1f5; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 40px; }

.site-head { display:flex; justify-content:space-between; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:14px 16px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; letter-spacing:.2px; }
.site-nav a { margin-left:16px; color:var(--mut); text-decoration:none; font-size:14px; }
.site-nav a:hover { color: var(--accent); }

.hero h1 { font-size: 26px; margin: 22px 0 4px; }
.hero .sub { color: var(--mut); margin: 0 0 18px; font-size: 14px; }
/* 'beta version' ribbon pinned to the top-right of the page title.
   Absolute so the h1 text stays untouched (tests assert on it); on narrow
   screens it drops into normal flow under the heading instead of colliding. */
.hero { position:relative; }
.beta-ribbon {
  position:absolute; top:26px; right:0;
  font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  background:var(--chip); border:1px solid var(--accent);
  border-radius:999px; padding:3px 10px;
  transform:rotate(2deg); white-space:nowrap;
}
@media (max-width:640px) {
  .beta-ribbon { position:static; display:inline-block; margin:2px 0 10px;
                 transform:none; }
}

.filters { display:flex; flex-direction:column; gap:10px;
  padding:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.filters .frow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters .fld { display:flex; align-items:center; gap:6px; }
.filters .fld .name { color:var(--mut); font-size:13px; }
.filters .fld-search { flex:1 1 220px; }
.filters .fld-search input { flex:1; min-width:120px; padding-right:30px; }
/* Clear ('✕') pinned inside the right edge of the search box. */
.search-box { position:relative; flex:1; display:flex; min-width:120px; }
.filters .search-clear { position:absolute; right:6px; top:50%;
  transform:translateY(-50%); border:0; background:none; color:var(--mut);
  font-size:13px; font-weight:400; line-height:1; padding:4px 6px;
  border-radius:999px; cursor:pointer; }
.filters .search-clear:hover { color:var(--accent); background:var(--chip); }
/* WebKit's native search cancel button would double up with ours. */
.filters input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance:none; appearance:none; }
.filters input, .filters select { padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit; }
.filters .chk { display:flex; gap:6px; align-items:center; color:var(--mut); font-size:14px; }
.filters button { padding:8px 14px; border:0; border-radius:8px; background:var(--accent);
  color:#fff; font-weight:600; cursor:pointer; }
/* Reset is a SECONDARY action: outline button, never bare text (it must
   look clickable). Accent-tinted while any filter is active. */
.filters .reset { padding:8px 14px; border:1px solid var(--line);
  border-radius:8px; background:transparent; color:var(--fg);
  font-size:14px; text-decoration:none; }
.filters .reset:hover { border-color:var(--accent); color:var(--accent); }
.filters .reset.is-active { border-color:var(--accent); color:var(--accent);
  font-weight:600; }
.count { color:var(--mut); font-size:14px; margin:14px 2px; }

/* Multi-select facet chips (countries / federations / years). The native
   checkbox is visually hidden but still drives :checked, so the page works
   without JS (Filter button) and stays keyboard/ARIA accessible. */
.fgroup { border:0; margin:0; padding:0; min-width:0;
  display:flex; align-items:baseline; gap:8px; }
.fgroup .name { color:var(--mut); font-size:13px; flex:0 0 auto; min-width:82px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { position:relative; cursor:pointer; }
.chip input { position:absolute; opacity:0; width:1px; height:1px; padding:0; border:0; }
.chip span { display:inline-block; padding:3px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--chip); color:var(--fg); font-size:13px; }
.chip:hover span { border-color:var(--accent); }
.chip input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
/* Facet size badge inside a chip ('Japan 116'). */
.chip .n { font-style:normal; margin-left:6px; font-size:12px; opacity:.55; }
.chip input:checked + span .n { opacity:.85; }
/* Folded chips (app.js progressive disclosure; all visible without JS). */
.chip.folded { display:none; }
/* JS-only controls. With JS off all chips are visible, so these are noise. */
html:not(.js) .js-only { display:none !important; }
/* Mirror of .js-only: controls that only exist for the JS-off GET-form
   fallback (the 'Filter' submit button) — instant filtering makes them
   dead weight when JS runs, on every screen size. */
html.js .nojs-only { display:none; }
.filters .more, .filters .clear { background:none; border:1px solid var(--line);
  color:var(--fg); border-radius:999px; padding:2px 10px; font-size:12px;
  font-weight:400; cursor:pointer; align-self:center; white-space:nowrap; }
.filters .more:hover, .filters .clear:hover { border-color:var(--accent); color:var(--accent); }
/* Empty facet options (continent with no matching contests): shown but inert. */
.chip input:disabled + span { opacity:.35; cursor:default; }
.chip input:disabled:hover + span, .chip input:disabled + span:hover { border-color:var(--line); }
@media (max-width:560px){ .fgroup { flex-direction:column; gap:4px; }
  .fgroup .name { min-width:0; } }

.month { margin-top: 22px; }
.month-head { font-size:15px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mut); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:12px; }
.cards { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.card { display:flex; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; }
.card.is-past { opacity:.45; }
.card .date { min-width:44px; text-align:center; border-right:1px solid var(--line); padding-right:10px; }
.card .date .d { display:block; font-size:20px; font-weight:700; line-height:1.1; }
.card .date .wd { display:block; font-size:11px; color:var(--mut); }
.card .body { flex:1; min-width:0; }
.card .title { margin:0 0 4px; font-size:16px; font-weight:600; }
.card .title a { text-decoration:none; color:var(--fg); }
.card .title a:hover { color: var(--accent); text-decoration:underline; }
.meta { margin:0; display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--mut); }
.meta .fed, .meta .cat { background:var(--chip); border-radius:999px; padding:1px 9px; }
/* "More info" expander: a pill toggle that reveals the contest's links
   inline under the meta line (native <details> — click again to fold). */
.more-links { display:inline-block; margin-top:7px; }
.more-links summary { cursor:pointer; list-style:none; user-select:none;
  display:inline-block; font-size:12px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:2px 10px; }
.more-links summary::-webkit-details-marker { display:none; }
.more-links summary::after { content:" ▾"; }
.more-links[open] summary::after { content:" ▴"; }
.more-links .links { list-style:none; margin:8px 0 2px; padding:0;
  display:flex; flex-wrap:wrap; gap:4px 18px; }
.more-links .links a { font-size:12.5px; color:var(--accent);
  text-decoration:none; }
.more-links .links a:hover { text-decoration:underline; }
.more-links .links .h { color:var(--mut); }

/* Continent tabs: single-select segmented control (radios). */
.tabs { display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px;
  background:var(--chip); border:1px solid var(--line); border-radius:999px; }
.tab { position:relative; cursor:pointer; }
.tab input { position:absolute; opacity:0; width:1px; height:1px; padding:0; border:0; }
.tab span { display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:13px; color:var(--fg); }
.tab .n { font-style:normal; margin-left:6px; font-size:12px; opacity:.55; }
.tab:hover span { color:var(--accent); }
.tab input:checked + span { background:var(--accent); color:#fff; font-weight:600; }
.tab input:checked + span .n { color:#fff; opacity:.8; background:none; }
.tab input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.tab input:disabled + span { opacity:.35; cursor:default; }
.tab input:disabled:hover + span { color:var(--fg); }

.empty { padding:28px; text-align:center; color:var(--mut); border:1px dashed var(--line); border-radius:10px; }
.empty pre { text-align:left; background:var(--card); padding:10px; border-radius:8px; overflow:auto; color:var(--fg); }
.site-foot { max-width:var(--maxw); margin:26px auto 0; padding:14px 16px;
  border-top:1px solid var(--line); color:var(--mut); font-size:13px; }
@media (max-width:560px){ .card .date{min-width:36px} .hero h1{font-size:21px} }

/* Theme toggle — only shown when JS can make it work (progressive
   enhancement, like the instant filters). */
.theme-btn { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-left:16px; padding:0; vertical-align:middle;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--fg); font:inherit; font-size:15px; line-height:1; cursor:pointer; }
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
html:not(.js) .theme-btn { display:none; }

/* Language switcher (i18n): the active locale gets a pill so it reads as
   state, not as another link to click. */
.lang-switch { display:inline-flex; gap:2px; margin-right:6px;
  vertical-align:middle; }
.site-nav .lang { margin-left:0; padding:4px 8px; border:1px solid transparent;
  border-radius:8px; font-size:13px; line-height:1; white-space:nowrap; }
.site-nav .lang:hover { border-color:var(--line); }
.site-nav .lang.on { color:var(--fg); background:var(--card);
  border-color:var(--line); pointer-events:none; }