/* The Times - token layer + components.
   Tokens are defined here (the one allowed source of raw values);
   every component rule below references tokens only. */

/* ---- tokens: primitives + semantic ---- */
:root {
  /* type */
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-body: 1.5;

  /* spacing: 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --measure: 72ch;

  /* color: light (newsprint) */
  --surface-page: #f6f4ee;
  --surface-raised: #fffdf8;
  --surface-inset: #edeae1;
  --text-primary: #1c1b18;
  --text-secondary: #5a564d;
  --text-faint: #6e6a60;
  --border-default: #d8d3c6;
  --border-strong: #8f8a7c;
  --accent: #7c2d2d;            /* oxblood - links, masthead rule */
  --accent-hover: #5e2121;
  --focus-ring: #1a4d8f;

  /* relation badges: color + text label, never color alone */
  --badge-contradicts-bg: #f3dcdc;
  --badge-contradicts-text: #6e1a1a;
  --badge-warning-bg: #f0e4cc;
  --badge-warning-text: #5c451a;
  --badge-followup-bg: #dce6e2;
  --badge-followup-text: #1f4a3d;
  --badge-background-bg: #e3e1da;
  --badge-background-text: #45423b;

  --ok-text: #2c5b36;
  --error-bg: #f3dcdc;
  --error-text: #6e1a1a;
  --warn-bg: #f0e4cc;
  --warn-text: #5c451a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #191813;
    --surface-raised: #23221c;
    --surface-inset: #14130f;
    --text-primary: #eae7dd;
    --text-secondary: #b3aea1;
    --text-faint: #a19c8f;
    --border-default: #3b392f;
    --border-strong: #6e6a5c;
    --accent: #e0927f;
    --accent-hover: #ecb3a5;
    --focus-ring: #8ab4e8;

    --badge-contradicts-bg: #3c2020;
    --badge-contradicts-text: #eebbbb;
    --badge-warning-bg: #383021;
    --badge-warning-text: #e6cf9a;
    --badge-followup-bg: #1f312b;
    --badge-followup-text: #a8d0c2;
    --badge-background-bg: #2e2d27;
    --badge-background-text: #c8c4b8;

    --ok-text: #97c9a2;
    --error-bg: #3c2020;
    --error-text: #eebbbb;
    --warn-bg: #383021;
    --warn-text: #e6cf9a;
  }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
}
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-12);
}
h1, h2, h3 {
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: var(--sp-6) 0 var(--sp-3);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: var(--sp-3) 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3);
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); z-index: 10; }

/* ---- masthead ---- */
.masthead {
  border-bottom: 3px double var(--border-strong);
  background: var(--surface-page);
}
.masthead-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}
.masthead .title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  margin-right: auto;
}
.masthead nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }
.masthead nav a { font-size: var(--text-sm); color: var(--text-primary); }
.masthead nav a[aria-current="page"] { font-weight: 600; color: var(--accent); }
.role-tag {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
}

/* ---- cards and lists ---- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}
.cluster-list { list-style: none; padding: 0; margin: 0; }
.cluster-list li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-default);
}
.cluster-list li:last-child { border-bottom: none; }
.meta { color: var(--text-secondary); font-size: var(--text-sm); }
.coverage {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
  white-space: nowrap;
}

/* ---- digest ---- */
.digest h2 { border-bottom: 1px solid var(--border-default); padding-bottom: var(--sp-2); }
.digest-body h2 { font-size: var(--text-lg); }
.digest-body ul { padding-left: var(--sp-5); }

/* ---- story page ---- */
.outlet-panel {
  background: var(--surface-inset);
  border-left: 3px solid var(--border-strong);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
}
.outlet-panel dt { font-weight: 600; color: var(--text-secondary); }
.outlet-panel dd { margin: 0 0 var(--sp-1); }
details > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--sp-1) 0;
}
details > summary:hover { color: var(--text-primary); }

.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-contradicts { background: var(--badge-contradicts-bg); color: var(--badge-contradicts-text); }
.badge-earlier_warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-follow_up { background: var(--badge-followup-bg); color: var(--badge-followup-text); }
.badge-background { background: var(--badge-background-bg); color: var(--badge-background-text); }

.entity-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; list-style: none; }
.entity-list li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
}

/* ---- forms ---- */
input[type="password"], input[type="search"], input[type="text"] {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
}
button {
  font: inherit;
  font-weight: 600;
  color: var(--surface-page);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  min-height: 44px;
}
button:hover { background: var(--accent-hover); }
button.quiet {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-weight: 400;
  min-height: auto;
  padding: var(--sp-1) var(--sp-3);
}
button.quiet:hover { color: var(--text-primary); border-color: var(--border-strong); }
.login-box { max-width: 26rem; margin: var(--sp-12) auto; }
.form-row { margin: var(--sp-4) 0; }
label { display: block; font-weight: 500; margin-bottom: var(--sp-1); }

/* ---- notices ---- */
.notice { border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.notice-error { background: var(--error-bg); color: var(--error-text); }
.notice-warn { background: var(--warn-bg); color: var(--warn-text); }

/* ---- tables (admin) ---- */
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
}
th { color: var(--text-secondary); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.status-ok { color: var(--ok-text); }
.status-err { color: var(--error-text); }
.status-ok, .status-err, code { overflow-wrap: anywhere; }

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-4);
  color: var(--text-faint);
  font-size: var(--text-xs);
  border-top: 1px solid var(--border-default);
}

@media (max-width: 480px) {
  .masthead .title { font-size: var(--text-2xl); }
  main { padding: var(--sp-3); }
}