/*
 * Nippon Numbers -- hand-written CSS, no framework (DESIGN_SITE.md 2.1).
 *
 * The custom-property block below transcribes a subset of the Digital
 * Agency (デジタル庁) Design System tokens -- color primitives, semantic
 * success/error/warning colors, font family, font-size/line-height scale,
 * border-radius scale and the focus-visible treatment -- from
 * @digital-go-jp/design-tokens and design-system-example-components-html
 * (both MIT licensed; see THIRD_PARTY_NOTICES.md at the repo root). Chosen
 * for its accessibility-first, high-contrast character, which reads as
 * "trustworthy and legible" rather than decorative -- the same register
 * this site's honesty-over-marketing positioning needs (DESIGN_SITE.md
 * 1.1). Nothing here reuses any Digital Agency logo, emblem or "government
 * site" chrome -- only the raw design tokens.
 *
 * Semantic role variables (surface/text/border/link roles below the token
 * block) and the dark-mode remap are this project's own -- the DADS token
 * package ships primitives, not a public light/dark role system.
 */

:root {
  /* -- DADS primitives (subset actually used) ------------------------- */
  --dads-blue-50: #e8f1fe;
  --dads-blue-100: #d9e6ff;
  --dads-blue-200: #c5d7fb;
  --dads-blue-300: #9db7f9;
  --dads-blue-700: #264af4;
  --dads-blue-800: #0031d8;
  --dads-blue-900: #0017c1;
  --dads-blue-1000: #00118f;
  --dads-light-blue-300: #97d3ff;
  --dads-light-blue-400: #57b8ff;
  --dads-magenta-900: #8b008b;
  --dads-orange-800: #c74700;
  --dads-yellow-300: #ffd43d;
  --dads-green-600: #259d63;
  --dads-green-800: #197a4b;
  --dads-red-800: #ec0000;
  --dads-red-900: #ce0000;
  --dads-white: #ffffff;
  --dads-black: #000000;
  --dads-gray-50: #f2f2f2;
  --dads-gray-100: #e6e6e6;
  --dads-gray-200: #cccccc;
  --dads-gray-300: #b3b3b3;
  --dads-gray-536: #767676; /* WCAG AA (4.5:1) minimum-contrast gray on white */
  --dads-gray-700: #4d4d4d;
  --dads-gray-800: #333333;
  --dads-gray-900: #1a1a1a;

  --font-family-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "Hiragino Sans", sans-serif;
  --font-family-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;

  --line-height-140: 1.4;
  --line-height-150: 1.5;
  --line-height-160: 1.6;
  --line-height-170: 1.7;

  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;

  --elevation-1: 0 2px 8px 1px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.3);

  /* -- spacing scale (this project's own, not a published DADS token) - */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* -- semantic roles (light, default) --------------------------------- */
  --color-bg: var(--dads-white);
  --color-surface: var(--dads-gray-50);
  --color-surface-raised: var(--dads-white);
  --color-text: var(--dads-gray-900);
  --color-text-muted: var(--dads-gray-536);
  --color-border: var(--dads-gray-200);
  --color-border-strong: var(--dads-gray-300);
  --color-link: var(--dads-blue-1000);
  --color-link-hover: var(--dads-blue-900);
  --color-link-visited: var(--dads-magenta-900);
  --color-link-active: var(--dads-orange-800);
  --color-accent: var(--dads-blue-700);
  --color-success: var(--dads-green-800);
  --color-error: var(--dads-red-900);
  --color-warning-bg: #fff8e0;
  --color-warning-text: #6e5600;
  --color-focus-ring: var(--dads-black);
  --color-focus-bg: var(--dads-yellow-300);
  --shadow-card: var(--elevation-1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #16181c;
    --color-surface: #1f2226;
    --color-surface-raised: #24272c;
    --color-text: #f0f0f0;
    --color-text-muted: #b3b3b3;
    --color-border: #3a3d42;
    --color-border-strong: #4d4d4d;
    --color-link: var(--dads-light-blue-300);
    --color-link-hover: var(--dads-light-blue-400);
    --color-link-visited: #d9a3ff;
    --color-link-active: #ffb066;
    --color-accent: var(--dads-light-blue-300);
    --color-success: #6bd19b;
    --color-error: #ff9c9c;
    --color-warning-bg: #3a3216;
    --color-warning-text: #f5dd8f;
    --color-focus-ring: var(--dads-white);
    --shadow-card: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-sans);
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-16);
  line-height: var(--line-height-160);
  -webkit-font-smoothing: antialiased;
}

/* WCAG 2.4.7-conformant focus style, transcribed from DADS's
   :focus-visible rule (4px solid ring + offset + yellow halo). */
:focus-visible {
  outline: 4px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-4);
  box-shadow: 0 0 0 2px var(--color-focus-bg);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.1875rem;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 0.1875rem;
}

a:active {
  color: var(--color-link-active);
}

h1,
h2,
h3 {
  line-height: var(--line-height-140);
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-32);
  margin: 0 0 var(--space-2);
}

h2 {
  font-size: var(--font-size-24);
  margin: var(--space-8) 0 var(--space-3);
}

h3 {
  font-size: var(--font-size-18);
  margin: var(--space-6) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
}

code,
pre,
.mono {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* -- header / nav ------------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.brand {
  font-weight: 700;
  font-size: var(--font-size-20);
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-16);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.1875rem;
}

/* -- main content -------------------------------------------------------*/
main {
  padding: var(--space-8) 0 var(--space-12);
}

.lede {
  font-size: var(--font-size-18);
  color: var(--color-text-muted);
  max-width: 40rem;
}

.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.card--muted {
  background: var(--color-surface);
  box-shadow: none;
}

.callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.notice {
  border-left: 4px solid var(--color-warning-text);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.notice a {
  color: inherit;
}

.badge {
  display: inline-block;
  font-size: var(--font-size-14);
  font-weight: 700;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-4);
  border: 1px solid currentColor;
}

.badge--ok {
  color: var(--color-success);
}

.badge--warn {
  color: var(--color-warning-text);
}

/* -- tables -------------------------------------------------------------*/
.table-scroll {
  overflow-x: auto;
  margin: var(--space-4) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-14);
}

caption {
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

th,
td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

th {
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border-strong);
}

td.num,
th.num {
  text-align: right;
  font-family: var(--font-family-mono);
}

/* -- metadata key/value list --------------------------------------------*/
dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--font-size-14);
}

dl.meta dt {
  color: var(--color-text-muted);
}

dl.meta dd {
  margin: 0;
  font-family: var(--font-family-mono);
  overflow-wrap: anywhere;
}

/* -- footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--font-size-14);
}

.site-footer p {
  margin: 0 0 var(--space-2);
}

.site-footer .disclaimer {
  font-weight: 700;
  color: var(--color-text);
}

@media (max-width: 30rem) {
  h1 {
    font-size: var(--font-size-28);
  }
}

/* Collapsed metadata block at the foot of the predictions page */
.meta-details { margin-top: 2.5rem; border-top: 1px solid var(--color-border, #767676); padding-top: 1rem; }
.meta-details summary { cursor: pointer; }
.meta-details summary h2 { display: inline; font-size: 1.125rem; }

/* Fixtures-first layout: compact header, table is the hero */
.page-title { font-size: 1.5rem; margin-bottom: 0.25rem; }
.lede { margin-bottom: 1.25rem; }
.callout--inline { display: block; margin-top: 0.5rem; font-size: 0.9375rem; }
.num--max { font-weight: 700; background: rgba(255, 255, 255, 0.06); }