/* Shared UI tokens and components; see design.md. */
@layer legacy, tokens, base, components, pages, responsive;

@layer tokens {
  :root, #radar-explorer {
    color-scheme: light;
    --canvas: #f6f7f9;
    --paper: var(--canvas);
    --panel: #ffffff;
    --surface: var(--panel);
    --ink: #202733;
    --text: var(--ink);
    --muted: #55606f;
    --line: #dee3e9;
    --edge: var(--line);
    --border: var(--line);
    --blue: #2b5fa8;
    --blue-deep: var(--blue);
    --accent: var(--blue);
    --button-hover: #244f8c;
    --button-pressed: #1e4276;
    --control-border: #b8c2cf;
    --selected: #edf3fc;
    --hover: #f0f2f6;
    --sea: #447b9b;
    --radius: 10px;
    --radius-sm: 8px;
    --shadow: none;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --display: var(--body);
    --sans: var(--body);
    --utility: var(--body);
    --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --page-width: 1440px;
    --gutter: 32px;
    --header-height: 72px;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-y: scroll; scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-height) + 24px); }
  body, #radar-explorer {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 400 16px/1.6 var(--body);
    font-synthesis: none;
    letter-spacing: normal;
  }
  main, footer { width: min(var(--page-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
  main { min-width: 0; }
  h1, h2, h3, h4 { font-family: var(--body); color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
  h1 { max-width: none; margin: 0 0 24px; font-size: 28px; line-height: 36px; }
  h2 { margin: 0 0 16px; font-size: 20px; line-height: 28px; }
  h3 { font-size: 18px; line-height: 26px; }
  p, li { line-height: 1.65; }
  a { color: var(--accent); text-underline-offset: 3px; }
  button, input, select, textarea, summary { font-family: var(--body); letter-spacing: normal; text-transform: none; }
  input, select, textarea { background-color: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
  input:not([type=range]):not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  button { color: var(--ink); }
  button, summary { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  input::placeholder { color: var(--muted); opacity: 1; }
  pre, code, kbd, samp, .blog-prose pre, .blog-prose code { font-family: var(--mono); }
  pre { max-width: 100%; overflow-x: auto; }
  th, td { font-variant-numeric: tabular-nums; }
  th { color: var(--muted); font-family: var(--body); font-size: 13px; line-height: 20px; letter-spacing: normal; text-transform: none; }
  td { font-size: 14px; line-height: 22px; }
  .eyebrow, .heading-note, .date-control, .section-title span, .section-note { font-family: var(--body); font-size: 14px; line-height: 22px; letter-spacing: normal; text-transform: none; color: var(--muted); }
  footer { padding-block: 32px; border-top: 1px solid var(--line); color: var(--muted); font: 400 14px/22px var(--body); letter-spacing: normal; }
  .footer-dataset { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font-size: 14px; }
  .support-note, .copyright { font-size: 13px; letter-spacing: normal; }
  .skip-link { position: fixed; z-index: 100; top: 12px; left: 16px; padding: 12px 16px; background: var(--ink); color: white; transform: translateY(-200%); }
  .skip-link:focus { transform: none; }
}

@layer components {
  /* The same DOM, font metrics, and three columns on every route. */
  .research-resources { position: relative; }
  .research-resources:not([open]) .site-resource-menu { display: none; }

  .research-page-title, .page-heading, .score-browse-header, .view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
  .research-page-title h1, .page-heading h1, .score-browse-header h1, .view-heading h1 { margin: 0; font-size: 28px; line-height: 36px; }
  .research-page-title > a { font-size: 14px; white-space: nowrap; text-decoration: none; }
  .research-page-title > a:hover { text-decoration: underline; }
  .export-button, .secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: 500 14px/20px var(--body); text-decoration: none; }
  .export-button:hover, .secondary-link:hover { background: var(--hover); border-color: #aab6c5; }
  .research-scope-toggle { display: none; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); text-align: left; font: 500 14px/22px var(--body); }
  .research-scope-toggle::after { content: "⌄"; margin-left: auto; flex: 0 0 auto; }
  .research-scope-toggle[aria-expanded=true]::after { content: "⌃"; }
  .research-domain-controls { margin-bottom: 24px; }
  .research-domain-tabs, .research-direction-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .research-domain-tabs { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .research-direction-tabs { padding: 16px 0 0; }
  .research-direction-tabs:empty { display: none; }
  .research-domain-tabs button, .research-direction-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); font: 400 14px/20px var(--body); white-space: nowrap; }
  .research-domain-tabs button:hover, .research-direction-tabs button:hover { background: var(--hover); }
  .research-domain-tabs button[aria-pressed=true], .research-direction-tabs button[aria-pressed=true] { border-color: #b8cceb; background: var(--selected); color: var(--accent); }
  .research-domain-tabs button span, .research-direction-tabs button span:last-child:not(:first-child) { font-size: 13px; font-variant-numeric: tabular-nums; }
  .tag, .event-badge, .metric-chip, .field-pill { border-width: 1px; border-color: var(--line); box-shadow: none; }
  .field-tag { border: 0; }
  .benchmark-skyline, .leaderboard-top, .trend-panel, .domain-panel, .frontier-panel, .findings-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: none; }
  dialog { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px #20273333; }
  dialog::backdrop { background: #20273366; backdrop-filter: blur(2px); }
  .detail-title { font: 600 24px/32px var(--body); color: var(--ink); letter-spacing: -.015em; }
  .detail-summary, .detail-body { font-size: 16px; line-height: 26px; }
  .research-detail-link { display: inline-flex; margin-top: 16px; padding: 10px 14px; border: 1px solid #b8cceb; border-radius: var(--radius-sm); background: var(--selected); color: var(--accent); font-size: 14px; text-decoration: none; }
}

@layer pages {
  .view, #today-view, #leaderboard-view, #saturation-view, #trends-view { padding-top: 32px; }
  /* Today */
  .research-field-launcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
  .research-field-launcher > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; min-height: 88px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); text-decoration: none; }
  .research-field-launcher > a:hover { border-color: #aab6c5; background: #fafbfc; }
  .launch-name { font-size: 15px; font-weight: 500; line-height: 22px; }
  .launch-count { font-size: 24px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
  .launch-count span { display: block; color: var(--muted); font-size: 13px; line-height: 20px; font-weight: 400; white-space: nowrap; }
  .today-filters { gap: 12px; padding: 16px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
  .today-filters .search-field input { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background-color: var(--canvas); font-size: 16px; }
  .today-filters .date-field, .today-filters select, .today-filters .filters-toggle, .today-filters .refresh-button { font: 400 14px/20px var(--body); letter-spacing: normal; }
  .today-filters .filters-toggle, .today-filters .refresh-button { min-height: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .content-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 24px; align-items: start; }
  .content-grid > div:first-child { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  #today-view .section-title { display: grid; gap: 8px; padding: 24px 24px 16px; margin: 0; border-bottom: 1px solid var(--line); }
  #today-view .section-title h2 { color: var(--ink); font: 600 20px/28px var(--body); letter-spacing: -.015em; }
  .results-meta { justify-content: flex-start; gap: 8px 16px; margin: 0; text-align: left; }
  .results-meta span { color: var(--muted); font: 400 13px/20px var(--body); letter-spacing: normal; }
  .today-sort-details { position: relative; font: 400 13px/20px var(--body); color: var(--muted); }
  .today-sort-details summary { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
  #today-sort { white-space: normal; }
  .today-sort-details[open] > span { display: block; max-width: 330px; padding-top: 8px; }
  #today-list { padding-inline: 24px; border: 0; background: var(--panel); }
  .record-card { border-color: var(--line); }
  .record-summary { grid-template-columns: 16px 28px minmax(0, 1fr) 100px; gap: 12px; padding: 24px 20px; align-items: start; }
  .record-summary.record-summary-unranked { grid-template-columns: 16px minmax(0, 1fr) 100px; }
  .record-summary .score, .record-summary .attention-activity { width: 100px; max-width: 100%; }
  .record-summary::before { width: 16px; height: 24px; margin-top: 2px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 24px; }
  .record-summary:hover::before { border: 0; background: transparent; color: var(--accent); }
  .record-card[open] > .record-summary::before { color: var(--accent); background: transparent; }
  .record-facts { font-size: 13px; line-height: 20px; letter-spacing: normal; }
  .signal-rank { padding-top: 3px; color: var(--muted); font: 400 13px/24px var(--body); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .record-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .record-heading p, .signal-tldr { color: var(--muted); font-size: 16px; line-height: 26px; }
  .signal-meta, .signal-meta strong, .signal-repo-meta { font: 400 13px/20px var(--body); letter-spacing: 0; color: var(--muted); }
  .signal-meta { gap: 4px 8px; }
  .signal-meta strong { font-weight: 500; }
  .tag, .event-badge, .metric-chip { font-family: var(--body); font-size: 13px; line-height: 20px; letter-spacing: 0; }
  .record-detail { margin-inline: 88px 20px; padding-block: 0 24px; font-size: 16px; }
  .today-pagination { padding: 16px 24px; margin: 0; border-top: 1px solid var(--line); font-size: 14px; }
  .daily-briefing, .daily-questions, .health-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
  .daily-briefing-title, .daily-questions-title { padding: 0 0 16px; margin: 0 0 16px; color: var(--ink); font: 600 20px/28px var(--body); letter-spacing: -.015em; }
  .daily-briefing p, .daily-briefing li, .daily-briefing .daily-briefing-summary, .daily-questions p { font: 400 16px/26px var(--body); color: var(--ink); }
  .daily-briefing p strong { font-weight: 600; }
  .daily-briefing-details summary, .daily-questions details summary { font-size: 14px; line-height: 22px; }
  .daily-briefing-meta, .daily-briefing-caveat, .health-panel-title, .health-panel-status { font: 400 13px/20px var(--body); letter-spacing: 0; color: var(--muted); }

  /* Explore: field navigation and dense, readable catalog. */
  #radar-explorer .workspace { display: grid; grid-template-columns: 272px minmax(0, 1fr); width: min(var(--page-width), calc(100% - var(--gutter) * 2)); max-width: none; margin: 0 auto; }
  #radar-explorer .sidebar { position: sticky; top: var(--header-height); align-self: start; max-height: calc(100vh - var(--header-height)); overflow-y: auto; height: auto; padding: 32px 16px 24px 0; border-right: 1px solid var(--line); background: transparent; }
  .sidebar-heading { margin: 0 0 16px; padding: 0 12px; color: var(--muted); font: 500 14px/20px var(--body); letter-spacing: 0; }
  .field-button { min-height: 44px; margin: 4px 0; padding: 10px 12px; gap: 8px; border: 0; border-radius: var(--radius-sm); color: var(--ink); font: 400 14px/22px var(--body); }
  .field-button.active { background: var(--selected); color: var(--accent); font-weight: 500; box-shadow: none; }
  .field-button:hover { background: var(--hover); }
  .field-button.active:hover { background: var(--selected); }
  .nav-count { color: var(--muted); font-size: 13px; }
  .nav-divider { margin: 16px 12px; }
  #subfield-nav { display: none; }
  .sidebar-bottom { margin: 24px 12px 0; padding-top: 24px; font-size: 13px; }
  #radar-explorer .main { width: 100%; max-width: none; padding: 32px 0 32px 24px; margin: 0; }
  #radar-explorer h1 { font: 600 28px/36px var(--body); color: var(--ink); letter-spacing: -.015em; }
  .field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
  .field-tile { display: grid; grid-template-columns: 1fr; gap: 8px; min-height: 172px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; transform: none; transition: background-color 120ms, border-color 120ms; }
  .field-tile:hover { transform: none; box-shadow: none; border-color: #aab6c5; background: #fafbfc; }
  .tile-header { min-height: 44px; color: var(--ink); font: 500 15px/22px var(--body); }
  .tile-count { margin: 0; color: var(--ink); font: 600 28px/36px var(--body); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
  .tile-foot { color: var(--muted); font-size: 13px; line-height: 20px; white-space: normal; }
  .tile-track { grid-column: 1/-1; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
  .tile-track > span { display: block; height: 100%; border-radius: 2px; background: #7599c6; }
  .domain-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .summary-count { margin: 0 0 4px; color: var(--ink); font: 600 28px/36px var(--body); font-variant-numeric: tabular-nums; }
  .summary-label { color: var(--muted); font-size: 14px; line-height: 22px; }
  .catalog-section { padding: 24px 24px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .section-heading { padding: 0; }
  .view-tabs { gap: 24px; }
  .view-tabs button { margin: 0; padding: 0 0 16px; color: var(--muted); font: 500 16px/24px var(--body); }
  .view-tabs button[aria-selected=true] { color: var(--accent); border-color: var(--accent); font-weight: 500; }
  .filter-row { gap: 12px; padding: 24px 0 12px; }
  .search-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .search-wrap input { min-height: 44px; padding: 10px 0; background: none; border: 0; border-radius: 0; font-size: 16px; }
  .search-wrap input::placeholder { color: var(--muted); }
  .filter-row select { padding: 10px 28px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
  .result-bar { min-height: 44px; padding: 0 0 16px; margin: 0; color: var(--muted); font-size: 14px; line-height: 22px; }
  .sort-label, .sort-label select { font-size: 14px; }
  .sort-label select { min-height: 36px; }
  #radar-explorer th { padding: 12px; border-color: var(--line); background: var(--canvas); color: var(--muted); font: 500 13px/20px var(--body); letter-spacing: 0; }
  #radar-explorer td { padding: 16px 12px; border-color: var(--line); color: var(--ink); font-size: 14px; line-height: 22px; }
  .benchmark-name { color: var(--ink); font: 600 16px/24px var(--body); }
  .source-line, .score-sub, .na { color: var(--muted); font-size: 13px; line-height: 20px; }
  .field-tag, .field-pill { color: var(--muted); font-size: 13px; }
  .score-value { color: var(--ink); font-size: 16px; }
  .pagination { padding: 16px 0; font-size: 14px; }
  .method-note { padding: 16px 0; font-size: 14px; }
  #radar-explorer .main-footer { width: 100%; margin-top: 24px; padding: 0; border: 0; font-size: 13px; }
  #radar-explorer #detail-dialog { width: calc(100% - 32px); max-width: 820px; padding: 0; }
  #detail-content { padding: 24px; }
  .detail-metrics strong { font: 600 24px/32px var(--body); color: var(--ink); }
  .detail-metrics span, .detail-top { font-size: 13px; }
  .detail-description { font-size: 16px; line-height: 26px; }

  /* Analysis views. All foregrounds change with the light panel. */
  .skyline-heading h2 { font-size: 22px; line-height: 30px; }
  .skyline-subtitle { color: var(--muted); font-size: 15px; line-height: 24px; }
  .skyline-toolbar { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
  .score-filter, .score-filter span, .skyline-height-control, .skyline-height-control span, .skyline-height-control select { font: 400 14px/22px var(--body); letter-spacing: 0; }
  .score-filter input[type=range] { accent-color: var(--accent); }
  .score-filter output { color: var(--ink); font: 600 20px/28px var(--body); }
  .skyline-chart { border: 0; background: var(--panel); }
  .skyline-caption, .figure-caption, .figure-note p, .skyline-method-body p { color: var(--muted); font: 400 14px/22px var(--body); letter-spacing: 0; }
  .leaderboard-top { margin-top: 24px; }
  .leaderboard-top-row { padding-block: 16px; border-color: var(--line); }
  .leaderboard-top-columns, .leaderboard-top-count { font-size: 14px; }
  .leaderboard-top-rank { font: 500 18px/26px var(--body); color: var(--muted); }
  .leaderboard-top-name, .score-ranking-link > span { font-size: 16px; font-weight: 600; }
  .score-ranking-link small { font-size: 13px; color: var(--muted); }
  .leaderboard-top-bar-fill { background: #7599c6; }
  .benchmark-workbench { grid-template-columns: 288px minmax(0, 1fr); gap: 24px; }
  .benchmark-navigator { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .benchmark-search-label { color: var(--ink); font-size: 16px; font-weight: 600; }
  .benchmark-search-input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 16px; }
  .benchmark-search-status { margin-block: 12px; color: var(--muted); font-size: 13px; }
  .benchmark-result { padding: 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); }
  .benchmark-result:hover { background: var(--hover); }
  .benchmark-result[aria-pressed=true] { border-color: #b8cceb; background: var(--selected); box-shadow: none; }
  .benchmark-result-name { font-size: 15px; font-weight: 600; line-height: 22px; }
  .benchmark-result-facts { color: var(--muted); font-size: 13px; line-height: 20px; }
  .frontier-panel { color: var(--ink); }
  .frontier-heading-row { gap: 24px; }
  .frontier-heading-row h2, .frontier-title-row h2, #frontier-heading { color: var(--ink); font: 600 24px/32px var(--body); letter-spacing: -.015em; }
  .frontier-panel .eyebrow, .frontier-panel .section-note, .frontier-picker, .frontier-stage, .frontier-org-key-name { color: var(--muted); font: 400 14px/22px var(--body); letter-spacing: 0; }
  .frontier-stage { border-color: var(--line); background: var(--canvas); }
  .frontier-picker select { border-color: var(--line); background: var(--panel); color: var(--ink); font-size: 14px; }
  .frontier-chart { background: var(--panel); border-color: var(--line); }
  .frontier-grid { stroke: var(--line); }
  .frontier-tick, .frontier-axis-label { fill: var(--muted); font-family: var(--body); font-size: 12px; letter-spacing: 0; }
  .frontier-legend { gap: 8px 24px; }
  .frontier-legend-item { font-size: 14px; line-height: 22px; }
  .frontier-legend-item strong { color: var(--ink); }
  .frontier-legend-item > span:last-child { color: var(--muted); }
  .frontier-org-key { border-color: var(--line); }
  .score-frontier-line { stroke: var(--accent); }
  .frontier-tooltip { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); box-shadow: 0 8px 24px #20273326; font-size: 14px; }
  .frontier-tooltip-title { color: var(--ink); font-size: 15px; }
  .frontier-tooltip-source { color: var(--accent); }
  .frontier-tooltip-kind, .frontier-tooltip-hint, .frontier-tooltip-details dt { color: var(--muted); font: 400 13px/20px var(--body); letter-spacing: 0; }
  .frontier-context, .frontier-context p { color: var(--ink); font-size: 16px; line-height: 26px; }
  .score-best-line { stroke: var(--accent); }
  .score-best-label { fill: var(--accent); font-size: 12px; }
  .score-gap-label { fill: var(--muted); font-size: 12px; letter-spacing: 0; }
  .score-readout-inner, .score-readout-empty, .task-shape { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); }
  .score-readout-figure strong { color: var(--ink); font: 600 24px/32px var(--body); }
  .score-readout-figure span, .score-readout-figure small, .score-readout-note, .score-readout-empty, .task-shape span, .task-shape-note, .frontier-caveat p, .pareto-readiness p { color: var(--muted); font: 400 13px/20px var(--body); letter-spacing: 0; }
  .task-shape p { color: var(--ink); font-size: 14px; line-height: 22px; }
  .score-evidence { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
  .score-evidence p, .score-evidence strong { color: var(--ink); font: 400 14px/22px var(--body); letter-spacing: 0; }
  .score-evidence strong { font-weight: 600; }
  .score-evidence summary, .frontier-explainer-sub summary { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--accent); background: var(--panel); font: 400 14px/22px var(--body); letter-spacing: 0; }
  .score-evidence summary:hover, .score-evidence[open] summary, .frontier-explainer-sub summary:hover, .frontier-explainer-sub[open] summary { color: var(--accent); background: var(--selected); }
  .score-evidence-yes { color: var(--accent); }
  .score-evidence-no, .frontier-caveat strong { color: #964d25; font-size: 13px; letter-spacing: 0; }
  .frontier-source-link { color: var(--accent); font-size: 14px; }
  .frontier-evidence, .frontier-caveat, .pareto-readiness { border-color: var(--line); }
  .pareto-readiness summary { color: var(--ink); font-size: 14px; }
  .domain-grid { gap: 16px; }
  .domain-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
  .domain-card h3 { font-size: 16px; }
  .legend, .trend-filter, .trend-message { font-family: var(--body); font-size: 14px; letter-spacing: 0; }

  .record-page main { max-width: 1040px; padding: 32px 0 48px; }
  .record-page h1 { margin: 0 0 24px; }
  .record-page h2 { margin-top: 32px; margin-bottom: 16px; }
  .record-page .lede { color: var(--muted); font-size: 16px; line-height: 26px; }
  .record-page dl { grid-template-columns: minmax(100px, 160px) minmax(0, 1fr); padding: 24px; gap: 12px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .record-page dd { margin: 0; overflow-wrap: anywhere; }
  .record-table-scroll { max-width: 100%; overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .record-table-scroll table { min-width: 660px; margin: 0; }
  .record-table-scroll th, .record-table-scroll td { padding: 12px 16px; }
  .record-table-scroll th { background: var(--canvas); }
  .record-page ul.links { margin: 0; }
  .record-page ul.links li { padding-block: 12px; }
  .record-page a { overflow-wrap: anywhere; }
  /* Documents retain the global header and use a centered reading column. */
  .blog-page main { max-width: 880px; }
  .blog-page .blog-view { padding: 32px 0 48px; }
  .blog-page .blog-hero { max-width: none; gap: 16px; margin-bottom: 32px; }
  .blog-page .blog-hero h1 { max-width: none; margin: 0; color: var(--ink); font: 600 28px/36px var(--body); }
  .blog-page .blog-lede { color: var(--muted); font-size: 16px; line-height: 26px; }
  .blog-page .blog-stats { gap: 16px; margin-bottom: 32px; }
  .blog-page .blog-stat { padding: 16px; border-color: var(--line); box-shadow: none; }
  .blog-page .blog-stat strong { font: 600 28px/36px var(--body); font-variant-numeric: tabular-nums; }
  .blog-page .blog-stat span, .blog-page .blog-meta, .blog-page .blog-kicker, .blog-page .blog-chip { color: var(--muted); font: 400 13px/20px var(--body); letter-spacing: 0; }
  .blog-page .blog-section { margin-block: 32px; }
  .blog-page .blog-section-heading { margin-bottom: 16px; padding-bottom: 16px; }
  .blog-page .blog-section h2 { color: var(--ink); font: 600 20px/28px var(--body); }
  .blog-page .blog-panel, .blog-page .blog-card { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
  .blog-page .blog-panel + .blog-panel { margin-top: 16px; }
  .blog-page .blog-index { gap: 16px; }
  .blog-page .blog-card h2 { margin: 0 0 12px; font: 600 20px/28px var(--body); }
  .blog-page .blog-card h2 a { color: var(--ink); text-decoration: none; }
  .blog-page .blog-card h2 a:hover { color: var(--accent); text-decoration: underline; }
  .blog-page .blog-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 26px; }
  .blog-page .blog-prose { max-width: none; font-size: 16px; line-height: 26px; }
  .blog-page .blog-prose p, .blog-page .blog-prose li { font-size: 16px; line-height: 26px; }
  .blog-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Shared action roles include footer and dynamically rendered detail links. */
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 16px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: 500 14px/20px var(--body); letter-spacing: normal; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button):hover:not(:disabled):not([aria-disabled=true]) { background: var(--hover); border-color: #8c9aab; color: var(--ink); text-decoration: none; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button):active:not(:disabled):not([aria-disabled=true]) { background: #e5eaf1; border-color: #8c9aab; color: var(--ink); }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button).primary-link { background: var(--accent); border-color: var(--accent); color: #fff; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button).primary-link:hover:not(:disabled):not([aria-disabled=true]) { background: var(--button-hover); border-color: var(--button-hover); color: #fff; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button).primary-link:active:not(:disabled):not([aria-disabled=true]) { background: var(--button-pressed); border-color: var(--button-pressed); color: #fff; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  :is(.primary-link, .secondary-link, .export-button, .clear-button, .today-pagination button, .pagination button, .leaderboard-top-more, .footer-dataset-actions a, .detail-links a, .research-detail-link, .today-filters .filters-toggle, .today-filters .refresh-button):is(:disabled,[aria-disabled=true]) { opacity: 1; background: var(--canvas); border-color: var(--line); color: #687586; cursor: not-allowed; box-shadow: none; }
  .pagination button { min-width: 44px; }
  .adoption-cta { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .adoption-cta p { font: 400 16px/26px var(--body); color: var(--ink); }
  .adoption-actions, .footer-dataset-actions, .detail-links { gap: 12px; align-items: center; }
  .today-pagination p { font: 400 13px/20px var(--body); letter-spacing: normal; }
  .footer-nav a { color: var(--muted); font: 400 14px/22px var(--body); }
  .footer-nav a:hover { color: var(--accent); }
  .dialog-close, .close-detail { width: 44px; height: 44px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); }
  .dialog-close:hover, .close-detail:hover { background: var(--hover); color: var(--ink); }
  .copy-target.is-copied { border-color: var(--accent); background: var(--selected); }
  .copy-target.is-copied .copy-status { color: var(--accent); }

}

@layer responsive {
  @media (max-width: 1200px) {
    .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-tile { min-height: 152px; }
    .tile-header { min-height: 22px; }
    .record-summary { grid-template-columns: 16px 28px minmax(0, 1fr); }
    .record-summary.record-summary-unranked { grid-template-columns: 16px minmax(0, 1fr); }
    .record-summary .score, .record-summary .attention-activity { grid-column: 3; width: 112px; }
    .record-summary.record-summary-unranked .score { grid-column: 2; }
    .content-grid { grid-template-columns: minmax(0, 1fr) 304px; }
  }
  @media (max-width: 1100px) {
    :root, #radar-explorer { --header-height: 112px; --gutter: 24px; }
    .benchmark-workbench { grid-template-columns: 248px minmax(0, 1fr); gap: 16px; }
    .frontier-heading-row { flex-wrap: wrap; }
    .frontier-controls { flex-basis: 100%; }
    .research-field-launcher { gap: 12px; }
    .research-field-launcher > a { align-items: flex-start; flex-direction: column; gap: 8px; }
    .launch-count, .launch-count span { text-align: left; }
  }
  @media (max-width: 900px) {
    .content-grid { grid-template-columns: 1fr; }
    #radar-explorer .workspace { display: block; }
    #radar-explorer .sidebar { position: static; height: auto; max-height: none; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); overflow: visible; }
    .sidebar-heading, .sidebar-bottom, .nav-divider { display: none; }
    #field-nav { display: flex; gap: 8px; overflow-x: auto; padding: 0; }
    .field-button { width: auto; flex: 0 0 auto; margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
    .field-button.active { border-color: #b8cceb; }
    .nav-count { display: inline; margin-left: 4px; }
    #radar-explorer .main { padding: 24px 0 32px; }
    .benchmark-workbench { grid-template-columns: 1fr; }
    .benchmark-navigator { position: static; max-height: 360px; overflow-y: auto; }
  }
  @media (max-width: 640px) {
    :root, #radar-explorer { --gutter: 16px; }
    .view, #today-view, #leaderboard-view, #saturation-view, #trends-view { padding-top: 24px; }
    h1, #radar-explorer h1, .research-page-title h1, .page-heading h1, .score-browse-header h1, .view-heading h1, .blog-page .blog-hero h1 { font-size: 24px; line-height: 32px; }
    .research-page-title, .page-heading, .score-browse-header, .view-heading { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
    .research-field-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .research-field-launcher > a { min-height: 116px; }
    .today-filters { flex-wrap: wrap; padding: 12px; gap: 8px; }
    .today-filters .search-field { flex-basis: 100%; width: 100%; }
    .today-filters .date-field { flex: 1; }
    #today-view .section-title, .daily-briefing, .daily-questions, .health-panel { padding: 16px; }
    #today-list { padding-inline: 16px; }
    .record-summary { gap: 8px; grid-template-columns: 16px 24px minmax(0, 1fr); padding: 20px 12px; }
    .record-card h3 { font-size: 17px; line-height: 25px; }
    .record-detail { margin-inline: 12px; }
    .today-pagination { padding: 16px; }
    .research-scope-toggle { display: flex; align-items: center; gap: 12px; }
    .research-domain-controls:not([data-expanded=true]) .research-scope-panel, .research-explorer-directions:not([data-expanded=true]) .research-direction-tabs { display: none; }
    .research-scope-panel { padding-top: 12px; }
    .research-domain-controls { margin-bottom: 16px; }
    .research-explorer-directions { margin-top: 16px; }
    .research-explorer-directions:has(.research-direction-tabs:empty) { display: none; }
    .research-domain-tabs { flex-wrap: wrap; overflow-x: auto; }
    .research-domain-tabs button { flex: 0 0 auto; }
    .research-direction-tabs { gap: 8px; }
    .benchmark-skyline, .leaderboard-top, .trend-panel, .domain-panel, .frontier-panel, .findings-panel { padding: 16px; }
    .skyline-toolbar { flex-wrap: wrap; gap: 16px; padding: 12px; }
    .score-filter { width: 100%; }
    .frontier-heading-row h2, .frontier-title-row h2, #frontier-heading { font-size: 22px; line-height: 30px; }
    .field-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
    .field-tile { flex: 0 0 calc(50% - 6px); padding: 12px; min-height: 148px; gap: 4px; scroll-snap-align: start; }
    .field-grid .field-tile:nth-child(n+5) { display: grid; }
    .tile-header { min-height: 44px; font-size: 14px; }
    .domain-summary { flex: 0 0 100%; gap: 12px; padding: 16px; }
    .summary-count { font-size: 24px; line-height: 32px; }
    .summary-label { font-size: 13px; line-height: 20px; }
    .catalog-section { padding: 16px 12px 0; }
    .filter-row { flex-wrap: wrap; gap: 8px; padding: 16px 0; }
    .search-wrap { flex-basis: 100%; }
    .filter-row select { flex: 1; max-width: 100%; }
    .result-bar { gap: 8px; }
    .sort-label { margin-left: 0; }
    #radar-explorer th, #radar-explorer td { padding-inline: 8px; }
    .benchmark-name { font-size: 15px; line-height: 23px; }
    .view-tabs { gap: 20px; }
    .view-tabs button { font-size: 15px; }
    .record-page main { padding-top: 24px; }
    .record-page dl { padding: 16px; gap: 8px 16px; }
    .blog-page .blog-view { padding-top: 24px; }
    .blog-page .blog-panel, .blog-page .blog-card { padding: 16px; }
    .blog-page .blog-stats { gap: 8px; }
    .blog-page .blog-stat { padding: 12px; }
    .blog-page .blog-grid { grid-template-columns: 1fr; }
    #detail-content { padding: 20px; }
  }
  @media (max-width: 374px) {
  }
  @media (pointer: coarse) {
    .field-button, .research-direction-tabs button, .research-domain-tabs button, .export-button, .secondary-link, .close-detail, .pagination button { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  }
}

@layer components {
  .masthead { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) 216px; align-items: center; gap: 16px; width: 100%; min-height: 72px; margin: 0; padding: 0 max(var(--gutter), calc((100% - var(--page-width)) / 2)); background: var(--panel); border-bottom: 1px solid var(--line); }
  .masthead-main { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
  .masthead .brand { --ink: #15242a; gap: .85rem; min-width: 0; padding: 0; color: var(--ink); text-decoration: none; }
  .masthead .brand strong { font: 600 .975rem/1 "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace; letter-spacing: .05em; white-space: nowrap; }
  .masthead .brand-mark { width: 42px; height: 42px; min-width: 42px; aspect-ratio: 1; flex: 0 0 42px; --edge: #b8c5cc; --line: #cbd5da; }
  .masthead .brand-mark span { inset: 8px; }
  .masthead .view-nav { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .masthead .view-nav > a, .masthead .view-nav > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 44px; margin: 0; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 14px/20px var(--body); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
  .masthead .view-nav > :hover { background: var(--hover); color: var(--ink); }
  .masthead .view-nav > .nav-active { background: var(--selected); color: var(--accent); }
  .masthead-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; }
  .masthead .repo-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 14px/20px var(--body); }
  .masthead .repo-badge:hover { background: var(--hover); color: var(--ink); }
  .masthead #badge-stars { width: 72px; gap: 4px; }
  .masthead .repo-badge svg { width: 20px; height: 20px; }
  .masthead .repo-badge-count { font-size: 12px; }
  .masthead .repo-badge-label { display: none; }
  .masthead .repo-badge-glyph { font: 500 14px/20px var(--body); }
  .masthead :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@layer pages {
  #leaderboard-view, #saturation-view, #trends-view, .blog-page .blog-view, .record-page main, #radar-explorer .main { padding-top: 24px; }
  .record-page .record-table-scroll { max-width: 100%; overflow-x: auto; }
}
@layer responsive {
  @media (max-width: 1280px) {
    :root, #radar-explorer { --header-height: 112px; }
    .masthead { grid-template-columns: minmax(0, 1fr) 216px; grid-template-rows: 64px 48px; gap: 0 16px; }
    .masthead-main { display: contents; }
    .masthead .brand { grid-column: 1; grid-row: 1; }
    .masthead-end { grid-column: 2; grid-row: 1; }
    .masthead .view-nav { grid-column: 1/-1; grid-row: 2; width: 100%; height: 48px; overflow-x: auto; scrollbar-width: none; }
  }
  @media (max-width: 580px) {
    .masthead { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60px 44px 48px; gap: 0; }
    .masthead .brand { grid-column: 1; grid-row: 1; }
    .masthead .view-nav { grid-column: 1; grid-row: 3; }
    .masthead-end { grid-column: 1; grid-row: 2; justify-content: flex-start; }
    .masthead .brand { gap: 6px; }
    .masthead .brand strong { font-size: .975rem; letter-spacing: .05em; }
    .masthead .feed-badge { display: none; }
    .masthead-end { gap: 0; }
    .masthead #badge-stars { width: 64px; }
  }
}

@layer components {
  .hf-upvote-banner { background: var(--panel); border-bottom: 1px solid var(--line); }
  .hf-upvote-banner-inner { width: min(var(--page-width), calc(100% - var(--gutter) * 2)); gap: 16px; padding-block: 10px; }
  .hf-paper-award { flex: 0 1 200px; }
  .hf-upvote-copy { justify-content: center; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: 500 14px/20px var(--body); letter-spacing: 0; text-decoration: none; }
  .hf-upvote-copy:hover { border-color: var(--control-border); background: var(--hover); text-decoration: none; }
  .hf-upvote-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; text-decoration: none; }
}
@layer responsive {
  @media (max-width: 580px) {
    .hf-upvote-banner-inner { gap: 12px; }
    .hf-upvote-copy { min-height: 44px; padding-inline: 12px; }
  }
}

/* Research component rhythm: one owner for each vertical gap. */
@layer pages {
  #radar-explorer .catalog-section { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
  #radar-explorer .section-heading, #radar-explorer .research-direction-tabs,
  #radar-explorer .filter-row, #radar-explorer .result-bar { margin: 0; padding: 0; }
  #radar-explorer .view-tabs button { padding-bottom: var(--space-3); }
  #radar-explorer .filter-row { gap: var(--space-3); }
  #radar-explorer .result-bar { min-height: 44px; gap: var(--space-3); }
  #radar-explorer .sort-label select { min-height: 44px; }
  #radar-explorer table { min-width: 0; width: 100%; table-layout: fixed; }
  #radar-explorer #rows tr { cursor: pointer; }
  #radar-explorer #rows tr:hover, #radar-explorer #rows tr:focus-within { background: var(--selected); }
  #radar-explorer .benchmark-name { background: transparent; width: 100%; }
  #radar-explorer .row-arrow { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 24px; height: 24px; color: var(--muted); }
  #radar-explorer .pagination { padding: var(--space-4) 0 0; }
  #radar-explorer .method-note { padding: var(--space-4) 0 0; margin: 0; }
  #radar-explorer #detail-content { padding: var(--space-6); }
  #radar-explorer .detail-top { gap: var(--space-4); margin-bottom: var(--space-4); }
  #radar-explorer .detail-title { margin: 0 0 var(--space-4); }
  #radar-explorer .detail-description { margin: 0; }
  #radar-explorer .detail-metrics { gap: var(--space-4); margin: var(--space-6) 0; padding: var(--space-4) 0; }
  #radar-explorer .detail-section-title { margin: var(--space-6) 0 var(--space-3); }
  #radar-explorer .chart-note { margin: var(--space-3) 0 var(--space-6); }
  #radar-explorer .detail-links { gap: var(--space-2); margin-top: var(--space-6); }
  .dialog-close, .close-detail { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; padding: 0; line-height: 1; }
}
@layer responsive {
  @media (max-width: 640px) {
    #radar-explorer .catalog-section, #radar-explorer #detail-content { padding: var(--space-4); }
  }
}

@layer components {
  .masthead .repo-badge-count { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: 500 13px/20px var(--body); }
  .masthead .repo-badge-count:empty { display: none; }
  .masthead .repo-badge:not([data-tooltip])::after,
  .masthead .repo-badge[data-tooltip=""]::after { display: none; }
  .masthead .repo-badge::after { font: 500 13px/20px var(--body); padding: 6px 10px; letter-spacing: 0; }
}