/* Kunnskapskart: one stylesheet. The profile "Rapport" (2026-10-13, MN: "suggest a better graphical profile ... go
   ahead"): a serif for headings, titles and captions, a sans with tabular figures for text, controls and numbers,
   warm paper, black ink and one rust accent for links and the active item. The data colours (dots, bubbles, bars,
   heat steps) stay the report's (report_figures.py: PRIMARY and its tints), so the site matches the report's maps.
   Both typefaces are self-hosted from assets/fonts (SIL Open Font License; the licences lie beside the files), so
   nothing is loaded from other sites. This file must stay ASCII: the build stops otherwise. */

/* Source Serif 4 (Adobe, OFL): a variable font for the weights 400 to 700, and an italic; two subsets each, latin
   and latin-ext (the Sami letters are in latin-ext). IBM Plex Sans (IBM, OFL): a variable font for 400 to 600, and an
   italic, in the same two subsets. A browser fetches only the subsets a page uses. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/source-serif-4-400-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/source-serif-4-400-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-400-600-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-400-600-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #1c1f23;
  --muted: #5c6168;
  --line: #cfc8bb;       /* rules */
  --hair: #e3ded4;       /* hairlines between rows */
  --band: #f3f0ea;       /* shaded rows */
  --bg: #faf8f4;         /* the page: warm paper */
  --panel: #ffffff;      /* the table, the drawer */
  --primary: #1f5f8b;    /* the data colours, as in the report */
  --primary-2: #6f9cc0;
  --primary-3: #c4d7e6;
  --accent: #9a3b1d;     /* links, the active item, focus: 6.9:1 on the paper */
  --gap: #a9a39a;
  --error: #9b1c1c;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --dot: 10px;
  --dot-gap: 3px;
  font-size: 100%;
}

* { box-sizing: border-box; }

/* "hidden" always hides, whatever display a class gives the element (labels in .controls are flex) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: #6e2a14; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
h1 { font-size: 1.7rem; margin: 1.1rem 0 0.3rem; }
h2 { font-size: 1.25rem; margin: 1.6rem 0 0.4rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 0.3rem; }
h1:focus, h2:focus { outline: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.lead { font-size: 1.05rem; max-width: 46rem; }
/* small capitals for labels, so the eye tells a label from the data without colour */
.caps, .controls label, .control-group, .filter legend, .fields dt, .key-number dt, .egm thead th, .fig-table thead th, .tags {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* numbers line up */
.egm .margin, .bib-n, .key-number dd, .heat-n, .bar-n, .bubble-n, .pie-num, .fig-table .num, .yn { font-variant-numeric: tabular-nums; }
/* the map page: the table should be on the first screen, so the heading and the lead sit tight */
#view-kart h1 { margin: 0.7rem 0 0.1rem; }
#view-kart .lead { margin: 0.1rem 0 0.8rem; max-width: 60rem; font: italic 400 1.05rem/1.5 var(--serif); color: var(--muted); }

/* header and footer: a masthead with a rule under it, the nav as text with a rule under the active item */
.site-header { background: none; }
.header-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding-top: 22px; padding-bottom: 0; border-bottom: 1px solid var(--ink); }
.site-title { margin: 0; font: 700 1.9rem/1.1 var(--serif); letter-spacing: -0.01em; }
.site-title a { color: var(--ink); text-decoration: none; }
.site-sub { margin: 4px 0 10px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nav { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a { display: block; padding: 0 0 10px; border-bottom: 3px solid transparent; text-decoration: none; color: var(--ink);
  font-size: 0.95rem; margin-bottom: -1px; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.site-footer { margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; padding: 12px 0 24px; }
.site-footer p { margin: 4px 0; }

/* notices */
.notice { border: 1px solid #e3cf8c; background: #fbf3dc; padding: 12px 14px; border-radius: 2px; margin: 16px 0; }
.notice-error { background: #fbe9e6; border-color: #e5b6ad; color: var(--error); }
.error-detail { color: var(--muted); font-size: 0.875rem; }
.draft-note { display: inline-block; background: #fbf3dc; border: 1px solid #e3cf8c; border-radius: 2px; padding: 2px 8px;
  font-size: 0.875rem; }

/* filters: a line of text, not a box; the panel opens under a hairline */
.filters { margin: 10px 0 2px; }
.filters > summary { cursor: pointer; padding: 6px 0; font-weight: 600; width: max-content; max-width: 100%; }
.filters > summary::marker { color: var(--muted); }
.filters[open] { border-bottom: 1px solid var(--hair); margin-bottom: 10px; }
.filters-body { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 6px 0 8px; }
.filter { border: 0; margin: 0; padding: 0; min-width: 11rem; }
.filter legend { font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 4px; }
.filter .check { display: block; font-size: 0.9rem; }
.filter-years label { display: inline-block; margin-right: 8px; font-size: 0.9rem; }
.filter-years input { width: 5.2rem; }
.filters-foot { margin: 0; padding: 0 0 10px; }
.filters-summary { margin-left: 10px; font-size: 0.9rem; font-weight: 400; }   /* in the summary line, after the toggle */
.link-button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer;
  font: inherit; }

/* controls: two labelled rows, the axes and the look; a select is text on a rule, with its own arrow */
.controls { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.control-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
.control-group { color: var(--muted); letter-spacing: 0.12em; min-width: 5rem; padding-bottom: 8px; }
.controls label { display: flex; flex-direction: column; color: var(--muted); }
select, input[type="search"], input[type="number"] {
  font: 400 0.95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 4px 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.controls select { margin-top: 2px; min-width: 13rem; }
/* the ready-made maps: a quiet line of their own under the axes and the look, not one of them (MN, 2026-10-15) */
.control-row.presets { justify-content: flex-end; border-top: 1px solid var(--hair); padding-top: 6px; margin-top: 2px; }
.controls .presets label { flex-direction: row; align-items: baseline; gap: 10px; }
.controls .presets select { margin-top: 0; min-width: 18rem; font-size: 0.88rem; color: var(--muted); border-bottom-color: var(--line); }
.controls .presets select:hover, .controls .presets select:focus { color: var(--ink); border-bottom-color: var(--ink); }
.button { font: 600 0.76rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 14px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; }
.button:hover { background: var(--band); }

/* the key */
.map-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 4px 0 10px; font-size: 0.84rem; color: var(--muted); }
.key-title { margin: 0; font-weight: 600; color: var(--ink); }
.key-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; }
.key-list li { display: flex; align-items: center; gap: 5px; }
.key-gaps { flex-basis: 100%; }     /* the hole signs on a line of their own */

/* the map: a figure, with a rule over the table and hairlines between the rows */
.map { position: relative; }
/* a wide map scrolls sideways inside its box; a fade at the right edge says so until the end is reached */
.map.scrolls::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%); }
.map.scrolls.at-end::after { display: none; }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: -3px; }
table.egm { border-collapse: collapse; width: 100%; min-width: 640px; border-top: 2px solid var(--ink); background: var(--panel); }
.egm th, .egm td { padding: 0; vertical-align: middle; }
.egm thead th { font-weight: 600; text-align: left; padding: 10px 8px 8px; vertical-align: bottom; border-bottom: 1px solid var(--ink); }
.egm thead th.corner { width: 15rem; }
.egm .colname { display: block; font-weight: 600; color: var(--ink); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; }                 /* a button does not inherit the heading's capitals: set them here */
.egm .corner-label { font: italic 0.9rem var(--serif); text-transform: none; letter-spacing: 0; color: var(--muted); }
.egm tr.rest-row th.theme .theme-name { font-style: italic; color: var(--muted); }
.egm .colhead.rest .colname { color: var(--muted); font-weight: 400; }
.egm .margin { text-align: right; padding: 0 10px 0 6px; color: var(--ink); font-weight: 500; font-size: 0.95rem;
  white-space: nowrap; width: 4.5rem; }
.egm thead th.margin { font-weight: 400; color: var(--muted); }
.egm tr.grouping th { text-align: left; padding: 14px 8px 4px; font: 600 1rem var(--serif); border-bottom: 1px solid var(--hair); }
.egm th.theme { text-align: left; font-weight: 400; padding: 6px 12px 6px 18px; font-size: 0.92rem;
  position: sticky; left: 0; background: var(--panel); z-index: 1; }
.egm tbody tr:not(.grouping):nth-child(odd) td, .egm tbody tr:not(.grouping):nth-child(odd) th.theme { background: var(--band); }
.egm tbody tr:not(.grouping) { border-bottom: 1px solid var(--hair); }
.egm .theme-name { text-decoration: underline dotted #bdb6aa; text-underline-offset: 3px; }

/* themes, column headings and the margins' numbers open their studies: they look like text until pointed at */
.list-btn, .num-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; }
.egm .colname.list-btn { font-weight: 600; color: var(--ink); text-decoration: underline dotted #bdb6aa;
  text-underline-offset: 4px; }
.list-btn:hover, .num-btn:hover { color: var(--accent); text-decoration: underline solid; }
.num-btn { font-weight: 500; color: var(--ink); padding: 2px 4px; }
.num-btn:hover { background: var(--band); }

/* a cell is wide enough for ten dots on a line, so a row of the colour key never wraps in the common case and the
   rows keep their places across the columns (as on Figur 5b); narrow screens scroll the table sideways */
.egm td.cell { padding: 5px 7px; min-height: 2.6rem; min-width: calc(10 * (var(--dot) + var(--dot-gap)) + 20px); }
.egm td.cell.empty { text-align: left; padding-left: 14px; }
.egm tfoot th, .egm tfoot td { padding: 8px 8px 10px; border-top: 1px solid var(--ink); font-size: 0.85rem; }
.egm .foot-label { text-align: left; font-weight: 400; color: var(--muted); padding-left: 18px; }
.egm tfoot td.margin { text-align: left; padding-left: 8px; }
.egm tfoot td.total { text-align: right; color: var(--ink); font-weight: 600; }

.cell-btn { display: flex; flex-direction: column; gap: var(--dot-gap); align-items: flex-start; width: 100%;
  min-height: 2.2rem; justify-content: center; padding: 6px; margin: 0; border: 1px solid transparent; border-radius: 2px;
  background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.cell-btn:hover { border-color: #bdb6aa; background: rgba(255, 255, 255, 0.7); }
.dotrow { display: flex; flex-wrap: wrap; gap: var(--dot-gap); max-width: calc(10 * (var(--dot) + var(--dot-gap))); min-height: var(--dot); }
.dotrow:empty { min-height: var(--dot); }

.dot { display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--primary);
  flex: none; }
.dot-main { background: var(--primary); }
.dot-central { background: var(--primary-2); }
.dot-contributes { background: var(--primary-3); box-shadow: inset 0 0 0 1px #9fbad2; }   /* an edge: the lightest dot sat at 1.35:1 on the shaded rows */
.dot-plain { background: var(--primary); }
.dot-hollow { background: #fff; border: 1.5px solid #8a96a3; }

/* the other views: bubbles, doughnuts, bars, heat map (docs/egm-site-visninger-2026-10.md) */
.controls label.check-inline, .check-inline { flex-direction: row !important; align-items: center; gap: 6px; align-self: flex-end;
  padding-bottom: 6px; color: var(--ink) !important; font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.bubbles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bubble-slot, .donut-slot { display: inline-flex; align-items: center; gap: 3px; }
.bubble { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  border: 1.5px solid transparent; }
.bubble.hollow { background: #fff; }
.bubble-n { font-size: 0.72rem; font-weight: 600; color: var(--ink); line-height: 1; }
.bubble-n.on-dark { color: #fff; }
.bubble-n.beside { color: var(--muted); }
.donut { display: block; flex: none; }
.donut-n { font: 600 11px "IBM Plex Sans", Arial, sans-serif; fill: var(--ink); }
.bars { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.bar-line { display: flex; align-items: center; gap: 4px; min-height: 9px; }
.bar-line.single { min-height: 14px; }
.bar-track { display: flex; }
.bar-part { display: inline-block; height: 8px; border: 1px solid transparent; border-radius: 1px; flex: none; }
.bar-line.single .bar-part { height: 12px; }
.bar-part.hollow { border-width: 1.5px; }
.bar-n { font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1; }
.egm-varme td.cell { padding: 2px; min-width: 5.5rem; }
.cell-varme { align-items: center; justify-content: center; min-height: 2.8rem; border-radius: 2px;
  border-color: rgba(28, 31, 35, 0.12); }
.cell-varme:hover { border-color: var(--ink); }
.heat-n { font-weight: 600; font-size: 0.92rem; }
.heat-light { color: var(--ink); }
.heat-dark { color: #fff; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid transparent; flex: none; }
.swatch.hollow { background: #fff; }
.key-scale { margin: 0; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.key-bubble { display: inline-block; border-radius: 50%; background: var(--primary-2); vertical-align: middle; }

.gap { display: inline-block; color: var(--gap); font-size: 1.3rem; line-height: 1; }
/* an empty cell under "hovedtema" or "sentralt tema" whose theme some studies still contribute to: the sign in a
   lighter grey with that number in a small badge beside it, so it reads as a sign plus a count, not as "o7" */
.gap-weak { color: #c9c3b8; white-space: nowrap; }
.gap-n { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--muted); background: #e8e3d9;
  border-radius: 2px; padding: 0 5px; line-height: 1.5; vertical-align: 3px; margin-left: 2px; }
.dash { color: #bdb6aa; }
/* the map's visible title, set as a figure caption: the axes, the counting rule and N */
.map-title { margin: 14px 0 2px; font: italic 400 1rem/1.4 var(--serif); }
.map-title b { font-style: normal; font-weight: 600; }

.map-notes { font-size: 0.875rem; max-width: 52rem; margin-top: 10px; color: var(--muted); }
.map-notes p { margin: 6px 0; }
.map-notes strong { color: var(--ink); }

/* study lists */
.list-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin: 12px 0 4px; }
.list-tools label { display: flex; flex-direction: column; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.list-tools .search input { width: 22rem; max-width: 80vw; margin-top: 2px; }
.study-list { list-style: none; margin: 8px 0; padding: 0; }
.study { padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }

/* a study's card: a serif title, who and where, research question, short summary, tags as a line of words, link;
   more on request */
.study-title { font: 600 1.15rem/1.3 var(--serif); margin: 0 0 2px !important; }
.study-meta { color: var(--muted); font-size: 0.85rem; }
.study-meta.lead { font-size: 1rem; }
.rq-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.85rem; margin: 4px 0 !important; }
.rq-label { color: var(--muted); }
.rq-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rq-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.summary { font-size: 0.92rem; margin: 6px 0 !important; max-width: 46rem; }
.aim-label { font-weight: 600; color: var(--muted); }
.links { margin-top: 6px !important; font-size: 0.85rem; }
.links .doi { font-size: 0.85rem; }
details.more { margin-top: 6px; font-size: 0.88rem; }
details.more > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; max-width: 100%; }
details.more > summary:hover { text-decoration: underline; }
details.more .more-label { margin: 10px 0 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.abstract p { margin: 4px 0; max-width: 46rem; line-height: 1.5; }
.abstract .abstract-src { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.study p { margin: 2px 0; }
.study-head { font-weight: 600; }
.study-link { text-decoration: none; color: var(--ink); }
.study-link:hover { text-decoration: underline; color: var(--accent); }
.citation { color: var(--ink); font-size: 0.92rem; overflow-wrap: anywhere; }
.citation.lead { font-size: 1rem; }
.tags { display: flex; flex-wrap: wrap; align-items: center; color: var(--muted); margin-top: 6px !important; line-height: 1.7; }
.tag { color: var(--muted); }
.tag + .tag::before { content: "\00b7"; margin: 0 7px; color: #bdb6aa; }   /* a middot between the words */
.tag-theme, .tag-theme-2 { color: var(--ink); font-weight: 600; }          /* what the study is about, apart from what it is */
.tag-quiet { color: var(--muted); }
/* the three-line card (2026-10-15): title, who/where/kind with the link, the facts in plain words; the rest in the
   expansion. The facts line is lower case and plain, not the small capitals of a label. */
.tags.facts { text-transform: none; letter-spacing: 0; font-size: 0.88rem; margin: 2px 0 !important; line-height: 1.6; }
.facts .rq-label { margin-right: 4px; }
.study-meta .doi { font-size: 0.85rem; }
.short { font-size: 0.92rem; line-height: 1.45; margin: 4px 0 2px !important; max-width: 46rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }   /* four lines at most */
.themes-line, .rq-line.in-more { font-size: 0.88rem; margin: 2px 0 !important; }
.study-list.rows .study { padding: 12px 0 13px; }
.study-list.rows .study-title { font-size: 1.05rem; }
.study-list.compact .study { padding: 10px 0 11px; }
.study-list.compact .study-title { font-size: 1rem; }
details.more > summary { margin-top: 2px; font-weight: 500; }
details.more .rq-line { margin-top: 8px !important; }
/* the study list: the search, the sort and the count stay in view while the list scrolls under them */
.list-tools { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0 6px; margin-bottom: 0; }
#l-count { position: sticky; top: 3.6rem; z-index: 5; background: var(--bg); margin: 0; padding: 2px 0 6px;
  border-bottom: 1px solid var(--hair); }
.doi { font-size: 0.8rem; overflow-wrap: anywhere; }
.empty-note { padding: 16px 0; color: var(--muted); }

/* one study */
.back { margin: 16px 0 0; font-size: 0.9rem; }
.fields { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 0; margin: 8px 0 12px; max-width: 52rem; }
.field { display: contents; }
.fields dt, .fields dd { padding: 7px 8px; border-bottom: 1px solid var(--hair); margin: 0; }
.fields dt { font-weight: 600; color: var(--muted); padding-top: 9px; }

/* about */
.defs { margin: 6px 0 12px; max-width: 52rem; }
.defs dt { font: 600 1rem var(--serif); margin-top: 10px; }
.defs dd { margin: 2px 0 0 0; color: var(--ink); }
#view-om p, #view-om li { max-width: 46rem; }

/* publishing and collaboration: bars split into before the last ten years (lighter, 3.3:1 on white) and then the
   last ten years (dark), the report's order */
.bib-part { margin-top: 1.8rem; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.bib-chart { margin: 14px 0 22px; max-width: 60rem; }
.bib-chart h3 { margin: 0 0 6px; font-size: 1.05rem; }
.bib-note { font-size: 0.82rem; color: var(--muted); max-width: 52rem; margin: 6px 0 0; }
.bib-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.85rem; margin: 6px 0; }
.bib-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.bib-recent { background: var(--primary); }
.bib-before { background: #5f93bf; }
.bib-bars { list-style: none; margin: 0; padding: 0; }
.bib-row { display: grid; grid-template-columns: minmax(9rem, 22rem) 1fr 2.5rem; align-items: center; gap: 10px;
  width: 100%; padding: 4px 6px; margin: 0; border: 1px solid transparent; border-radius: 2px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bib-row:hover { background: var(--band); border-color: var(--hair); }
.bib-label { font-size: 0.9rem; overflow-wrap: anywhere; }
.bib-sub { display: block; font-size: 0.76rem; color: var(--muted); }
.bib-track { display: flex; height: 14px; min-width: 0; }
.bib-track span { display: block; height: 100%; }
.bib-track span + span { border-left: 1px solid #ffffff; }
.bib-n { font-weight: 500; color: var(--ink); font-size: 0.9rem; text-align: right; }
.years-scroll { overflow-x: auto; padding-bottom: 4px; }
.years { display: flex; align-items: flex-end; gap: 3px; min-height: 150px; padding: 4px 14px 0; }
.ycol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 18px; flex: none; }
.ybar-btn { display: block; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; }
.ybar-btn:hover .ystack { outline: 2px solid var(--ink); outline-offset: 1px; }
.ystack { display: flex; flex-direction: column; justify-content: flex-end; width: 14px; overflow: hidden;
  border-radius: 2px 2px 0 0; }
.yseg { display: block; width: 100%; flex: none; }
.yseg + .yseg { border-top: 1px solid #ffffff; }
.ybar-empty { display: block; width: 14px; height: 1px; background: var(--line); }
.years-wide .ycol { width: 64px; }
.years-wide .ystack, .years-wide .ybar-empty { width: 40px; }
.years-wide .ylab { white-space: normal; text-align: center; height: auto; min-height: 1.1em; font-size: 0.72rem; }

/* a figure's own choices, beside its heading */
.fig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.fig-select select { margin-left: 4px; padding: 2px 20px 2px 0; font-size: 0.85rem; }
.fig-check { color: var(--ink) !important; letter-spacing: 0; text-transform: none; font-size: 0.85rem; }

/* the doughnut and its key */
.pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 6px 0; }
.pie { display: block; flex: none; }
.pie-seg { cursor: pointer; }
.pie-seg:hover { opacity: 0.8; }
.pie-n { font: 600 22px "Source Serif 4", Georgia, serif; fill: var(--ink); }
.pie-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 6px; border: 1px solid transparent;
  border-radius: 2px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pie-item:hover { background: var(--band); border-color: var(--hair); }
.pie-item-empty { cursor: default; color: var(--muted); }
.pie-label { font-size: 0.9rem; }
.pie-num { margin-left: auto; padding-left: 16px; font-weight: 500; color: var(--ink); font-size: 0.85rem; white-space: nowrap; }

/* the figure as a table */
.fig-table-wrap { border-top: 0; max-width: 60rem; }
.fig-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; border-top: 2px solid var(--ink); background: var(--panel); }
.fig-table th, .fig-table td { padding: 4px 8px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.fig-table thead th { color: var(--muted); border-bottom: 1px solid var(--ink); font-weight: 600; }
.fig-table tbody th { font-weight: 400; }
.fig-table .num { text-align: right; white-space: nowrap; }
.fig-table .strong { font-weight: 600; }
.fig-table tr.rest th { font-style: italic; color: var(--muted); }
.fig-table tfoot td { border-bottom: 0; padding-top: 6px; }
.yn { font-size: 0.68rem; color: var(--muted); line-height: 1.2; }
.ylab { font-size: 0.7rem; color: var(--muted); height: 1.1em; margin-top: 2px; white-space: nowrap; }

/* the overview: the numbers at a glance in one ruled line, residual rows, a chart's own select */
.key-numbers { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0 4px; max-width: 60rem; border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair); }
.key-number { flex: 1 1 9rem; padding: 10px 14px 10px 0; margin: 0 14px 0 0; border-right: 1px solid var(--hair); }
.key-number:last-child { border-right: 0; }
.key-number dt { color: var(--muted); }
.key-number dd { margin: 2px 0 0; font: 600 1.7rem/1.1 var(--serif); color: var(--ink); }
.bib-label.rest { font-style: italic; color: var(--muted); }
.bib-row-empty { cursor: default; }
.bib-row-empty:hover { background: none; border-color: transparent; }
.bib-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.inline-select { font-size: 0.85rem; color: var(--muted); }
.inline-select select { margin-left: 4px; }
.ov-controls { margin: 6px 0 0; }

@media (max-width: 720px) {
  .bib-row { grid-template-columns: 1fr 2.5rem; }
  .bib-track { grid-column: 1 / -1; grid-row: 2; }
  .key-number { flex-basis: 45%; }
}

/* the drawer with a cell's studies */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(30rem, 100vw); background: var(--panel);
  border-left: 1px solid var(--ink); box-shadow: -8px 0 24px rgba(28, 31, 35, 0.10); z-index: 20; display: flex;
  flex-direction: column; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 8px;
  border-bottom: 1px solid var(--hair); }
.drawer-head h2 { margin: 0; font-size: 1.15rem; }
.drawer-close { font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: 0 4px; }
.drawer-body { overflow-y: auto; padding: 4px 16px 24px; }
.drawer-sub { color: var(--muted); font-size: 0.9rem; margin: 6px 0; }
.study-list.compact .study { padding: 8px 0 10px; }

@media (max-width: 720px) {
  h1 { font-size: 1.4rem; }
  .site-title { font-size: 1.5rem; }
  .nav { gap: 14px; }
  .egm thead th.corner { width: 10rem; }
  .egm th.theme { padding-left: 8px; font-size: 0.85rem; }
  .fields { grid-template-columns: 1fr; }
  .fields dt { border-bottom: 0; padding-bottom: 0; }
  .controls select { min-width: 0; width: 100%; }
  .controls label { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

@media print {
  .site-header nav, .controls, .filters, .drawer, .skip, .list-tools, .back, #l-csv { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  .table-scroll { overflow: visible; border: 0; }
  table.egm { min-width: 0; }
  .egm tbody tr:not(.grouping):nth-child(odd) td, .egm tbody tr:not(.grouping):nth-child(odd) th.theme {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: var(--ink); text-decoration: none; }
}