/* Raw Aus Pol skin over the research projects' own stylesheets.
   Loaded after /styles.css and the project's style.css. */

:root {
  --ink: var(--fg);
  --ink-soft: var(--muted);
  --paper: var(--bg);
  --rule: var(--border);
  --rule-soft: var(--border);
  --accent: var(--raw);
  --accent-soft: #ecebfb;
  --path: #fbf9dc;
  --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #9d9bff;
    --accent-soft: #23224a;
    --path: #2a2814;
  }
}

/* Wider than the rest of the site: these pages are mostly tables. */
.sw main, .sw footer { max-width: var(--max); }
.sw main { padding: 24px 16px 64px; }
.sw footer { text-align: left; padding: 30px 16px 44px; background: var(--card); border-top: 1px solid var(--border); }
.sw footer .foot-grid, .sw footer .fine { padding: 0; }

/* Raw Aus Pol header, smaller than on the home page */
header.rap { padding-top: 20px; }
header.rap h1 img { width: 72px; height: 72px; border-radius: 12px; }
header.rap nav { margin-bottom: 16px; }

/* The project's own bar, under ours */
.sw .masthead { position: static; border-top: 1px solid var(--border); }
.sw .masthead .wrap { padding: 10px 16px; gap: 10px 24px; }
.sw .brand { display: block; }
.sw .brand a { color: var(--fg); text-decoration: none; }
.sw .brand strong { display: inline; font-size: 16px; }
.sw .crumb { font-size: 13px; color: var(--muted); margin-right: 4px; }
.sw .crumb a { color: var(--muted); }
.sw .masthead nav { margin: 0 0 0 auto; row-gap: 2px; }
.sw .masthead nav a { margin: 0; font-weight: 600; text-decoration: none; }
.sw .masthead nav a:hover { border-bottom-color: var(--aus); }

/* Headings: the site's yellow underline instead of the project's rule */
.sw main h2 { display: block; border-bottom: 4px solid var(--aus); width: fit-content; max-width: 100%; }
.sw .cta-band h2, .sw .caveat h2, .sw .tradeoff h2, .sw .edit-cta h2 { border: 0; }

.sw .btn { background: var(--raw); border-radius: 999px; }
.sw .btn-ghost { background: transparent; color: var(--fg); }
.sw .metric-hot { border-color: var(--pol); }
.sw .metric-hot .metric-n { color: var(--pol); }
.sw .bar { background: var(--raw); }
.sw .addressable .bar { background: var(--aus); }

/* The projects' dark --card is blue-grey; use the site's */
:root { --card: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --card: #1e1e1c; } }

/* Processes table: sortable headings, confidence grades and filter */
.sortable th button { all: unset; cursor: pointer; }
.sortable th button:hover, .sortable th button:focus-visible { color: var(--fg); text-decoration: underline; }
.sortable th[aria-sort="ascending"] button::after { content: " ▲"; }
.sortable th[aria-sort="descending"] button::after { content: " ▼"; }
.grade { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.grade-high { background: #00843d; color: #fff; }
.grade-medium { background: var(--aus); color: #1d1d1b; }
.grade-low { background: var(--pol); color: #fff; }
.conf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.conf-filter button { padding: 5px 14px; font-size: 13px; background: var(--card); color: var(--fg); border: 1px solid var(--border); }
.conf-filter button[aria-pressed="true"] { background: var(--raw); color: #fff; border-color: var(--raw); }
