/* ASA Araştırma Masası: "Gazete masası" (ADR-066)

   An FT/Economist-style data desk: warm paper, a thick navy rule above every block and a thin
   one under its heading, Instrument Serif headings, Source Sans 3 text, Source Code Pro numbers,
   square corners, no shadows. Navy #1c3f6e is the identity and the one accent of every chart;
   red appears in one place only, the kicker above each page title.

   Two themes, one set of tokens each. The light theme is printed paper; the dark one is the same
   page as a night edition: warm dark paper, cream ink, the navy lifted until it reads on the dark
   ground. index.html sets data-theme before the first paint and app.js keeps it in step with the
   reader's choice or the system setting, so the dark values exist exactly once, below. */

:root {
  --canvas: #fcf1e5;
  --surface: #fff8f0;
  --surface-2: #f6e6d4;
  --ink: #1e1b18;
  --ink-2: #453d35;
  --ink-3: #6a5e52;
  --line: #e4d2bf;
  --line-2: #c4ad95;
  --brand: #1c3f6e;
  --brand-strong: #142f53;
  --brand-tint: #f3e7da;
  --on-brand: #ffffff;
  --kicker: #b8352b;
  --ok: #1c3f6e;
  --alert: #8f2a22;
  /* The method audit (biostatistics): "check" on its tint, the arithmetic warning, grey items. */
  --alert-tint: #f7e0d8;
  --warn: #7f5600;
  --warn-tint: #f5e6c4;
  --mute: #8c7f72;
  --backdrop: rgb(30 27 24 / 0.45);
  --shadow: none;
  --radius: 0;
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-read: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-data: "Source Code Pro", "Consolas", monospace;
  --font-head: "Instrument Serif", "Georgia", serif;
  /* Charts and the corpus map: the accent, its lighter step, and the warm greys around them. */
  --chart-accent: #1c3f6e;
  --chart-accent-soft: #8ea6c8;
  --chart-grey: #8c7f72;
  --chart-pale: #dccab5;
  --chart-grid: #e2cfba;
  --chart-row: #eadbc9;
  --chart-na: #eadbc9;
  --chart-stem: #cbb6a0;
  --chart-spark: #e6d6c3;
  --chart-label-bg: rgb(255 248 240 / 0.86);
  --map-point: #7d6f62;
  --map-accent: #1c3f6e;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --canvas: #1b1713;
  --surface: #241f1a;
  --surface-2: #2c261f;
  --ink: #f2e8da;
  --ink-2: #d8cab8;
  --ink-3: #b3a490;
  --line: #3a3229;
  --line-2: #5c5044;
  --brand: #9bb8e3;
  --brand-strong: #bcd0ee;
  --brand-tint: #232b37;
  --on-brand: #15120f;
  --kicker: #ef8573;
  --ok: #9bb8e3;
  --alert: #f29a8b;
  --alert-tint: #3a2420;
  --warn: #e3b45c;
  --warn-tint: #352a16;
  --mute: #a8988a;
  --backdrop: rgb(0 0 0 / 0.6);
  --chart-accent: #9bb8e3;
  --chart-accent-soft: #5d7cab;
  --chart-grey: #a8988a;
  --chart-pale: #5a4c3f;
  --chart-grid: #3b332a;
  --chart-row: #2f2822;
  --chart-na: #776859;
  --chart-stem: #6c5e50;
  --chart-spark: #3a3129;
  --chart-label-bg: rgb(27 23 19 / 0.86);
  --map-point: #8a7b6b;
  --map-accent: #a9c5ef;
  color-scheme: dark;
}

/* Base */

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

[hidden] {
  display: none !important;
}

html {
  background: var(--canvas);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

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

code,
kbd {
  font-family: var(--font-data);
  font-size: 0.82em;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.5rem 0.9rem;
  border-radius: 0;
}

.skip-link:focus {
  top: 1rem;
}

.eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: none;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--line-2);
  padding: 0.5rem 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
  border-radius: 0;
  border-color: var(--ink-2);
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
}

.button:hover {
  border-color: var(--ink-3);
}

.button.primary {
  color: var(--on-brand);
  border-color: var(--brand);
  background: var(--brand);
}

.button.primary:hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.button.primary:disabled {
  cursor: progress;
  opacity: 0.6;
}

.button.ghost {
  background: transparent;
}

.button kbd {
  border: 1px solid color-mix(in srgb, var(--on-brand) 35%, transparent);
  padding: 0 0.3rem;
  font-size: 0.7rem;
  opacity: 0.85;
  border-radius: 0;
  font-family: var(--font-data);
}

/* Shell */

.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  height: 100vh;
  overflow-y: auto;
  padding: 1.4rem 1.1rem;
  background: var(--canvas);
  border-right: 1px solid var(--line-2);
  border-top: 6px solid var(--brand);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--brand);
}

.brand-mark,
.auth-mark {
  /* The columns read as a bar chart from afar and as book spines up close; they carry no colour
     of their own so the mark follows the text it sits beside, in either theme. */
  fill: currentColor;
}

.brand-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.brand-sub {
  display: block;
  color: var(--ink-3);
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ink);
}

.nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0.6rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.nav a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.nav a[aria-current="page"] {
  background: var(--brand);
  color: var(--on-brand);
}

.nav-count {
  margin-left: auto;
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* The count of articles that arrived since this account last looked (ADR-046). */
.nav-count.badge {
  min-width: 1.35rem;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.05rem 0.4rem;
  font-weight: 600;
  text-align: center;
  border-radius: 0;
}
.nav a[aria-current="page"] .nav-count {
  color: var(--on-brand);
}


.side-section {
  border-top: 3px solid var(--brand);
  padding-top: 0.6rem;
}

.side-heading {
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.side-stats {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.side-stats div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.side-stats dt {
  color: var(--ink-2);
  font-size: 0.95rem;
}

.side-stats dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.side-stats .updated dd {
  color: var(--ink-3);
}

.ai-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
}

.ai-state.is-on .state-dot {
  background: var(--ok);
}

.ai-model {
  margin: 0;
  color: var(--ink-3);
  word-break: break-word;
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ai-model-row {
  display: block;
}

.side-actions {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
}

.side-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
  color: var(--ink-2);
  text-align: left;
  border-radius: 0;
  border-color: var(--line-2);
  background: transparent;
  font-size: 0.95rem;
}

.side-button:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

.main {
  width: 100%;
  max-width: 1320px;
  padding: 2.2rem 2.6rem 4rem;
  outline: none;
}

.page-header {
  max-width: none;
  padding-top: 0.7rem;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-top: 6px solid var(--brand);
  border-bottom: 1px solid var(--ink);
}

.page-title {
  margin: 0;
  letter-spacing: -0.005em;
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.04;
}

.page-lead {
  margin: 0.6rem 0 0;
  max-width: 70ch;
  font-size: 1.1rem;
  color: var(--ink-2);
}

.card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-head {
  padding: 0.5rem 0 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-2);
}

.card-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
}

.card-sub {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  color: var(--ink-3);
}

/* Ask */

.composer {
  overflow: hidden;
  max-width: 980px;
  border: 1px solid var(--ink-2);
  background: var(--surface);
}

.composer:focus-within {
  border-color: var(--brand);
  box-shadow: inset 0 3px 0 var(--brand);
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  resize: vertical;
  border: 0;
  background: transparent;
  padding: 1.1rem 1.25rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  line-height: 1.45;
}

.composer textarea:focus {
  outline: none;
}

.composer textarea::placeholder {
  color: var(--ink-3);
}

.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem 0.75rem 1.25rem;
  border-top: 1px solid var(--line-2);
  background: transparent;
}

.scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.counter {
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: 0.8rem;
}

.suggestions {
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.6rem;
  max-width: 980px;
  margin-top: 1.4rem;
}

.suggestion {
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: 0.45rem 0 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
}

.suggestion:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.status {
  max-width: 920px;
  min-height: 1.4rem;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}

.status.is-error {
  color: var(--alert);
}

.loading {
  max-width: 920px;
  margin-top: 0.5rem;
  padding: 1.25rem;
}

.skeleton {
  height: 0.9rem;
  width: 78%;
  margin-bottom: 0.7rem;
  background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 0;
}

.skeleton.wide {
  width: 92%;
}

.skeleton.short {
  width: 46%;
}

.loading-note {
  margin: 0.8rem 0 0;
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--ink-3);
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.result {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
  gap: 2.4rem;
  margin-top: 1.4rem;
}

.answer-card {
  padding: 0.6rem 0 0;
  border-top: 4px solid var(--brand);
}

.answer-head {
  margin-bottom: 0.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ink);
}

.answer-question {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.12rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--ink-2);
}

.answer-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0.7rem 0 0;
  gap: 0.2rem 0;
}

.claims {
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.claim:last-child {
  border-bottom: 0;
}

.claim-number {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-content: flex-start;
  width: auto;
  height: auto;
  padding-top: 0.15rem;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-data);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand);
}

.claim-text {
  margin: 0 0 0.6rem;
  max-width: 70ch;
  margin-bottom: 0.45rem;
  font-family: var(--font-read);
  font-size: 1.1rem;
  line-height: 1.5;
}

.claim-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cite {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  padding: 0 0.35rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--brand);
}

.cite:hover,
.cite.is-linked {
  border-color: var(--ink-2);
}
.cite:hover {
  border-color: var(--brand);
}

.cite.is-linked {
  border-color: var(--brand);
}


.callout {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  font-family: var(--font-read);
  font-size: 1.05rem;
  border: 0;
  border-left: 3px solid var(--ink-3);
  border-radius: 0;
  background: transparent;
}

.answer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink);
}

.provenance {
  margin: 0;
  font-family: var(--font-data);
  color: var(--ink-3);
  word-break: break-word;
  font-size: 0.75rem;
}

.evidence {
  position: sticky;
  top: 1.25rem;
  padding: 0.6rem 1.1rem 1rem;
  border-top: 4px solid var(--brand);
  background: var(--surface-2);
}

.evidence-note {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Full text and author abstracts are two kinds of evidence and never look alike (ADR-048). */
.evidence-legend {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.tier-note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.source-kind {
  width: fit-content;
  line-height: 1.5;
  display: block;
  margin: 0 0 0.1rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-3);
}

.source-kind.is-abstract {
  border-style: dashed;
  color: var(--ink-2);
}

/* Evidence plot: a ggplot2-style Cleveland dot plot of the cited passages */

.plot {
  margin: 0 0 1rem;
  position: relative;
}

.sources {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.source {
  display: grid;
  align-items: start;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
}

.source.is-linked {
  background: var(--surface);
}

.source-id {
  padding-top: 0.12rem;
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}

.source-title {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  font-family: var(--font-read);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

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

.source-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: 0.74rem;
}

/* The licence name links to its deed, which is what CC BY attribution asks for. */
.license-link {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

.license-link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* A source-free explanation must never be mistaken for cited evidence (ADR-045). */
.general-explanation {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border: 0;
  border-left: 3px solid var(--ink-3);
  border-radius: 0;
  background: transparent;
}

.general-explanation-note {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.general-explanation-text {
  margin: 0 0 0.5rem;
  font-family: var(--font-read);
  line-height: 1.6;
}

.evidence-filter {
  margin: 0.75rem 0 0;
  font-family: var(--font-data);
  color: var(--ink-3);
  font-size: 0.75rem;
}

.corpus {
  max-width: 980px;
  margin-top: 2.2rem;
  border-top: 4px solid var(--brand);
}

.corpus-list {
  margin: 0;
  list-style: none;
  padding: 0;
}

.corpus-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
}

.corpus-item:hover {
  background: var(--surface-2);
}

.corpus-title {
  font-family: var(--font-read);
  font-size: 1.02rem;
  font-weight: 600;
}

.corpus-meta {
  flex: none;
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* Articles */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0;
  border-top: 4px solid var(--brand);
  border-bottom: 1px solid var(--ink);
}

.search {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  padding: 0 0.7rem;
  color: var(--ink-3);
  border-radius: 0;
  border-color: var(--ink-3);
  background: var(--surface);
}

.search:focus-within {
  border-color: var(--brand);
}

.search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  color: var(--ink);
}

.search input:focus {
  outline: none;
}

.select select {
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
  max-width: 17rem;
  border-radius: 0;
  border-color: var(--ink-3);
  background: var(--surface);
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.segmented button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  border-radius: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.segmented button[aria-pressed="true"] {
  background: var(--brand);
  box-shadow: none;
  color: var(--on-brand);
}

.result-count {
  margin: 0 0 0 auto;
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: 0.8rem;
}

.library {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 2rem;
}

.list-card {
  overflow: hidden;
}

.article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - 17rem);
  min-height: 16rem;
  overflow-y: auto;
}

.article-row {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  border-left: 4px solid transparent;
  padding: 0.85rem 0.9rem 0.9rem 0.7rem;
}

.article-row:hover {
  background: var(--surface);
}

.article-row[aria-current="true"] {
  border-left-color: var(--brand);
  background: var(--surface-2);
}

.row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.journal-tag {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand);
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-3);
}

.status-tag::before {
  content: "";
  border: 1.5px solid currentColor;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0;
  border-width: 1px;
}

.status-tag.is-analyzed {
  color: var(--ink);
}

.status-tag.is-analyzed::before {
  background: currentColor;
}

.row-title {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-head);
  font-size: 1.42rem;
  line-height: 1.15;
}

.is-untitled {
  color: var(--ink-3);
  font-style: italic;
}

.row-authors {
  display: block;
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.list-foot {
  display: flex;
  justify-content: center;
  padding: 0.7rem;
}

.list-empty {
  padding: 2rem 1.2rem;
  color: var(--ink-3);
}

.detail {
  position: sticky;
  top: 1.25rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 0.9rem 1.5rem 1.4rem;
  border-top: 4px solid var(--brand);
  background: var(--surface);
}

.detail-empty {
  display: grid;
  place-items: center;
  min-height: 18rem;
  text-align: center;
  color: var(--ink-3);
}

.detail-empty p {
  max-width: 38ch;
  margin: 0.6rem 0 0;
}

.detail-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.detail-title {
  margin: 0.5rem 0 0.5rem;
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.05;
}

.detail-authors {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-2);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.4rem;
}

.section {
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.section-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.12rem;
  font-weight: 700;
}

.section-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.segmented.small button {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  letter-spacing: 0;
}

.translation-problem,
.problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.translation-problem {
  border-radius: 0;
  background: transparent;
}


.problem {
  border-left-color: var(--alert);
  color: var(--ink);
  text-align: left;
  border-radius: 0;
  background: transparent;
}

.translation-problem p,
.problem p {
  margin: 0;
  max-width: 60ch;
}

.lead {
  border-left: 3px solid var(--brand);
  margin: 0 0 1.4rem;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: 0.8rem 0;
  font-family: var(--font-head);
  font-size: 1.55rem;
  line-height: 1.22;
}

.group {
  margin-top: 1.4rem;
}

.group-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-2);
}

.facts {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.75rem 1.2rem;
  margin: 0;
}

.facts dt {
  padding-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-2);
}

.facts dd {
  margin: 0;
  max-width: 70ch;
  line-height: 1.5;
  font-family: var(--font-read);
  font-size: 1.04rem;
}

.facts ul {
  margin: 0;
  padding-left: 1.1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip {
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  padding: 0.05rem 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

/* The methods of a v5.2 analysis (ADR-071): a chip per method opens its quote below the chips;
   a method whose quote the server could not find in the source is faint and dashed. */
.method-chip {
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}

.method-chip.is-main {
  border-color: var(--ink-3);
  font-weight: 600;
}

.method-chip:hover,
.method-chip[aria-expanded="true"] {
  border-color: var(--brand);
  background: var(--surface-2);
}

.method-chip.is-unverified {
  border-style: dashed;
  opacity: 0.55;
}

.method-note {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.method-detail {
  margin-top: 0.6rem;
}

.method-detail-head {
  margin: 0 0 0.4rem;
}

.method-quote.is-unverified q {
  color: var(--ink-3);
}

.meter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

.meter-bars {
  display: inline-flex;
  gap: 3px;
}

.meter-bars span {
  width: 22px;
  height: 6px;
  background: var(--line);
  border-radius: 0;
}

.meter-bars span.is-on {
  background: var(--brand);
}

.abstract {
  margin: 0;
  line-height: 1.55;
  font-family: var(--font-read);
  font-size: 1.04rem;
}

.note {
  margin: 1.2rem 0 0;
  font-family: var(--font-data);
  color: var(--ink-3);
  font-size: 0.75rem;
}

/* Journals */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.15rem 1.2rem 1rem;
  border-radius: 0;
  box-shadow: none;
}

.journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.journal-name {
  margin: 0;
  font-family: var(--font-read);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
}

.journal-publisher {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.journal-ids {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-3);
}

.coverage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.coverage-count {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 500;
}

.coverage-count small {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-3);
}

.coverage-bar {
  height: 8px;
  border-radius: 0;
  background: var(--line);
  overflow: hidden;
}

.coverage-bar span {
  display: block;
  height: 100%;
  background: var(--chart-accent);
}

.journal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--ink-3);
}

.journal-actions {
  display: flex;
  gap: 0.4rem;
}

.journal-actions .button {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

/* Dialog */

dialog {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--line-2);
  padding: 1.5rem;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18);
  border-radius: 0;
}

dialog::backdrop {
  background: var(--backdrop);
}

dialog h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-read);
  font-size: 1.35rem;
  font-weight: 600;
}

dialog p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.field-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

dialog input {
  width: 100%;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  padding: 0.55rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.85rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Responsive and motion */

@media (max-width: 1100px) {
  .result,
  .library {
    grid-template-columns: minmax(0, 1fr);
  }
  .library {
    gap: 1.4rem;
  }

  .result {
    grid-template-columns: minmax(0, 1fr);
  }


  .evidence,
  .detail {
    position: static;
    max-height: none;
  }

  .article-list {
    max-height: 28rem;
  }
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.9rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .brand-sub,
  .side-section {
    display: none;
  }

  .nav {
    flex-direction: row;
    order: 3;
    width: 100%;
    overflow-x: auto;
    border-top: 0;
  }

  .nav a {
    white-space: nowrap;
    border-bottom: 0;
    padding: 0.35rem 0.7rem;
  }

  .side-actions {
    display: flex;
    margin: 0 0 0 auto;
  }

  .side-button {
    width: auto;
  }
  .side-button .nav-icon {
    display: inline-flex;
  }


  #theme-label {
    display: none;
  }

  .main {
    padding: 1.4rem 1rem 3rem;
  }

  .page-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 560px) {
  .composer-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .composer-actions {
    justify-content: space-between;
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .facts dd {
    margin-bottom: 0.8rem;
  }

  .result-count {
    margin-left: 0;
  }

  #key-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .skeleton {
    animation: none;
  }
}

/* Dashboard, discovery, profile */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 1.2rem;
  gap: 1.2rem;
}

.tile {
  display: grid;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.7rem 0 0.4rem;
  border-top: 2px solid var(--ink);
  gap: 0.15rem;
}

/* Label, value, and note share rows across a line of tiles, so a label that wraps onto a second
   line ("Yalnız özetle aranabilir") does not push its number below its neighbours' numbers. */
@supports (grid-template-rows: subgrid) {
  .tile {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

.tile-label {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 0.3rem;
}

.tile-value {
  font-family: var(--font-head);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  order: -1;
  letter-spacing: -0.01em;
}

.tile-note {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-3);
}

.panel-grid {
  /* One chart per row: a half-width chart shrinks its labels below reading size. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.2rem;
  gap: 2.2rem;
  margin-top: 1.4rem;
}

.chart-card.wide {
  grid-column: 1 / -1;
}
.chart-card {
  border-top: 4px solid var(--brand);
}


.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.term-row {
  display: inline-flex;
  align-items: stretch;
}

.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--brand-tint) calc(var(--term-weight, 0.5) * 100%), var(--surface));
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.term-chip:hover {
  border-color: var(--brand);
}

.term-count {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.term-follow {
  margin-left: -0.4rem;
  padding: 0 0.55rem;
  border: 1px solid var(--line-2);
  border-left: none;
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.term-follow:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  border: 1px solid var(--brand);
  background: var(--brand-tint);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  border-radius: 0;
  box-shadow: none;
}

.filter-chip button {
  border: none;
  background: none;
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Literature table (ADR-051). On a desktop the view is a column exactly as tall as the window:
   filters, the search's chips, a tools row, and the table box, which takes the rest. Both of the
   box's scrollbars therefore stay on screen, the header row and the Künye column stay put while it
   scrolls, and the page never has to scroll to reach them. A phone keeps the ordinary page. */

.term-table-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.3rem;
  margin-left: 0.45rem;
  color: var(--brand);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  text-decoration: none;
  white-space: nowrap;
}

.term-table-link:hover,
.term-table-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.term-table-link .nav-icon {
  width: 15px;
  height: 15px;
}

/* The icon-only form beside every subject chip on the discovery page. */
.term-table-link.is-icon {
  margin-left: 0.15rem;
  padding: 0.25rem;
  border-radius: 0;
  color: var(--ink-3);
}

.term-table-link.is-icon:hover,
.term-table-link.is-icon:focus-visible {
  color: var(--brand);
  background: var(--brand-tint);
  text-decoration: none;
}

.literature-toolbar {
  margin-bottom: 0.75rem;
}

/* The search box takes the toolbar's whole first row; its suggestions open below it. */
.literature-search {
  position: relative;
  flex: 1 1 100%;
  padding-right: 0.3rem;
}
.literature-search input {
  border-radius: 0;
  border-color: var(--ink-3);
  background: var(--surface);
}


.literature-search-submit {
  margin: 0.25rem 0;
  padding: 0.32rem 0.9rem;
}

/* Narrower than a wide search row, so each count stays near its label. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  width: min(100%, 46rem);
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), 0 8px 24px rgba(16, 24, 40, 0.12);
  color: var(--ink);
}

.search-suggestions [role="option"] {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0;
  cursor: pointer;
}

.search-suggestions [role="option"]:hover,
.search-suggestions [role="option"][aria-selected="true"] {
  background: var(--brand-tint);
}

.search-suggestions .is-all {
  font-weight: 500;
}

.suggestion-kind {
  flex: none;
  min-width: 8rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
}

.suggestion-label {
  flex: 1;
  min-width: 0;
}

.suggestion-hint {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.literature-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.literature-chips .filter-chip {
  padding: 0.22rem 0.45rem 0.22rem 0.65rem;
  font-size: 0.84rem;
}

.literature-chips .filter-chip.is-term {
  border-color: var(--line-2);
  background: var(--surface);
}

.literature-chips .filter-chip.is-excluded {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
  color: var(--ink-3);
}

.literature-chips .filter-chip button:hover {
  color: var(--brand);
}

.chip-more {
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
}

.literature-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
}

.literature-tools .literature-count {
  margin: 0 auto 0 0;
}

.literature-tools .button {
  padding: 0.38rem 0.65rem;
}

.literature-tools .button:disabled {
  cursor: default;
  opacity: 0.45;
}

.literature-focus-toggle[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
}

.year-range {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.year-range input {
  width: 6.5rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  padding: 0.5rem 0.7rem;
  color: var(--ink);
}

/* Both scrollbars are always there, so the reader never has to find the end of the table to learn
   that it scrolls. The box is its own stacking context, so its sticky cells never cover the
   suggestion list or anything else outside it. */
.table-scroll {
  overflow: scroll;
  max-height: 72vh;
  padding: 0;
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
}

.table-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.table-scroll::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-corner {
  background: var(--surface-2);
}

.table-scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--surface-2);
  border-radius: 0;
  background: var(--ink-3);
}

.table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ink-2);
}

/* Chrome would drop the styled bars above if these applied everywhere, so only Firefox gets them. */
@supports not selector(::-webkit-scrollbar) {
  .table-scroll {
    scrollbar-width: auto;
    scrollbar-color: var(--ink-3) var(--surface-2);
  }
}

/* A dragged scrollbar or a flick ends at the start of the nearest column, never half way through
   one. Proximity, not mandatory: a small scroll inside a wide column is left where it stops. */
#literature-table {
  scroll-snap-type: x proximity;
}

.literature-table thead th:not(:first-child) {
  scroll-snap-align: start;
}

/* Column strip: jump straight to a column instead of dragging a short scrollbar thumb. */
.literature-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
}

.literature-columns-label {
  margin-right: 0.2rem;
  color: var(--ink-3);
  font-size: 0.82rem;
}

.literature-columns button {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.28rem 0.7rem;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.literature-columns button:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

.literature-columns button[aria-current="true"] {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
}

/* Separate borders move with a sticky cell; collapsed ones would stay behind in the grid. */
.literature-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 0.97rem;
  line-height: 1.5;
}

/* A set width is what makes a cell wrap its text inside a max-content table. */
.literature-table th,
.literature-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}

.literature-table .col-citation {
  width: 19rem;
}

.literature-table .col-matches {
  width: 15rem;
}

.literature-table .col-purpose,
.literature-table .col-methodology,
.literature-table .col-findings {
  width: 25rem;
}

.literature-table .col-methods,
.literature-table .col-dataset,
.literature-table .col-limitations {
  width: 22rem;
}

.literature-table .col-difficulty,
.literature-table .col-source,
.literature-table .col-language {
  width: 7.5rem;
}

.literature-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom-color: var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}

/* The Künye column keeps the article in view while the other columns scroll sideways under it. */
.literature-table th:first-child,
.literature-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow:
    1px 0 0 var(--line-2),
    6px 0 10px -6px color-mix(in srgb, var(--ink) 24%, transparent);
}

/* The corner cell stays above both the header row and the Künye column. */
.literature-table thead th:first-child {
  z-index: 3;
  background: var(--surface-2);
}

.literature-table tbody tr:hover > td {
  background: var(--surface-2);
}

.literature-table tbody tr:last-child td {
  border-bottom: 0;
}

.literature-table a {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

.literature-table a:hover {
  text-decoration-color: currentColor;
}

.literature-title {
  display: block;
  font-family: var(--font-read);
  font-size: 1.04rem;
  line-height: 1.35;
}

/* A long author list stops after three lines; the title attribute and the workbook keep it all. */
.literature-authors {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.4;
}

.literature-meta {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: 0.84rem;
}

.literature-doi {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: 0.76rem;
}

.literature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.pill.is-title {
  border-color: var(--brand);
  color: var(--brand);
}

.col-matches .pill {
  margin-top: 0.35rem;
}
.scope .pill:not(:last-child)::after {
  content: "|";
  margin: 0 0.6em;
  color: var(--line-2);
}


.table-list {
  margin: 0;
  padding-left: 1rem;
}

.table-list li + li {
  margin-top: 0.2rem;
}

/* A long cell shows five lines and a button; the workbook keeps the whole text. */
.cell-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.cell-clamp.is-open {
  display: block;
  overflow: visible;
}

.clamp-toggle {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clamp-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (min-width: 861px) {
  /* The view fills the window as a column and the table box takes whatever height is left. Each
     rule hangs on :has(), so a browser without it keeps the page layout and the box's max-height. */
  .main:has(> #view-literature:not([hidden])) {
    display: flex;
    flex-direction: column;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 1.1rem;
  }

  .main:has(> #view-literature:not([hidden])) > #view-literature {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .main:has(> #view-literature:not([hidden])) > #view-literature > * {
    flex: none;
  }

  /* As specific as the rule above, which would otherwise keep the box at its content height. */
  .main:has(> #view-literature:not([hidden])) > #view-literature > .table-scroll {
    flex: 1 1 auto;
    min-height: 16rem;
    max-height: none;
  }

  /* A compact header: the lead fits on one line, so the table keeps the height. */
  #view-literature .page-header {
    max-width: none;
    margin-bottom: 0.9rem;
  }

  #view-literature .page-title {
    font-size: 1.65rem;
  }

  #view-literature .page-lead {
    max-width: none;
    margin-top: 0.3rem;
    font-size: 0.93rem;
  }

  /* Tam ekran: no sidebar, no page header, no corner button; the table gets the whole window. */
  body.literature-focus .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.literature-focus .sidebar,
  body.literature-focus .contact-button,
  body.literature-focus #view-literature .page-header {
    display: none;
  }

  body.literature-focus .main:has(> #view-literature:not([hidden])) {
    padding: 0.75rem 0.9rem 0.8rem;
  }
}

/* Below the desktop width the page scrolls as usual, so Tam ekran has nothing to add there. */
@media (max-width: 860px) {
  .literature-focus-toggle {
    display: none;
  }
}

@media (max-width: 560px) {
  .literature-table {
    font-size: 0.92rem;
  }

  .literature-table .col-citation {
    width: 11rem;
  }

  .literature-table .col-matches {
    width: 10rem;
  }

  .literature-table .col-purpose,
  .literature-table .col-methodology,
  .literature-table .col-findings,
  .literature-table .col-methods,
  .literature-table .col-dataset,
  .literature-table .col-limitations {
    width: 13rem;
  }

  .literature-table .col-difficulty,
  .literature-table .col-source,
  .literature-table .col-language {
    width: 6rem;
  }

  .suggestion-kind {
    min-width: 0;
  }

  .suggestion-hint {
    display: none;
  }
}

.feed-list,
.profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.feed-item a,
.profile-line {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}

.feed-item a:hover,
.profile-line:hover {
  background: var(--surface-2);
}

.feed-item.is-new a {
  border-left: 3px solid var(--brand);
}

.feed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.feed-title {
  font-family: var(--font-read);
  font-size: 1.02rem;
  color: var(--ink);
}

.profile-list > li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.4rem;
}

.profile-list > li:last-child {
  border-bottom: none;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 0.8rem 0.35rem;
}

.profile-actions .button {
  padding: 0.35rem 0.7rem;
  font-size: 0.84rem;
}

.button.ghost.is-on {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}
.detail-actions .button:first-child {
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-weight: 500;
}


/* The note's timestamp and its delete button share one line. */
.profile-line-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.profile-note {
  margin: 0 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border-radius: 0;
  font-family: var(--font-read);
  white-space: pre-wrap;
}

.profile-meta {
  padding: 0 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.profile-claims {
  margin: 0;
  padding: 0 0.8rem 0 2rem;
  font-family: var(--font-read);
  color: var(--ink-2);
  display: grid;
  gap: 0.3rem;
}

.interest-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.interest-form input,
.personal input,
.personal textarea,
.login-card input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.personal input {
  border-radius: 0;
}


.interest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
}

.tag-articles {
  margin-top: 1rem;
}

#view-login {
  /* The sign-in card is the whole page, so centre it instead of pinning it to the top. */
  display: grid;
  align-content: center;
  min-height: calc(100vh - 6rem);
}

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}

/* The sign-in page: a front-page column beside the form. */
.auth-brand {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1rem 0 0;
  border-top: 6px solid var(--brand);
}

.auth-mark {
  width: 40px;
  height: 40px;
  color: var(--brand);
}

.auth-brand-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.02;
}

.auth-brand-lead {
  margin: 0;
  font-family: var(--font-read);
  font-size: 1.05rem;
  color: var(--ink-2);
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.6rem;
  margin: 0.4rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--line);
}

.auth-stats div {
  display: grid;
  gap: 0.1rem;
}

.auth-stats dt {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
}

.auth-stats dd {
  order: -1;
  margin: 0;
  font-family: var(--font-head);
  font-size: 2.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.auth-points {
  display: grid;
  gap: 0.45rem;
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.auth-form {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1rem 1.6rem 1.6rem;
  border-top: 4px solid var(--brand);
  background: var(--surface);
}

.auth-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.02;
}

.auth-lead {
  margin: 0 0 0.4rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.field {
  display: grid;
  gap: 0.3rem;
}

.field input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.98rem;
}

.field input:focus-visible {
  border-color: var(--brand);
}

.field-input {
  position: relative;
  display: block;
}

.field-toggle {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0.2rem 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.field-toggle:hover {
  color: var(--brand);
}

.auth-submit {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.65rem 1rem;
}

.auth-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    margin: 0.5rem auto;
  }

  .auth-brand {
    padding: 0.8rem 0 0;
  }

  .auth-form {
    padding: 1rem 1.1rem 1.4rem;
  }

  .auth-brand-title,
  .auth-title {
    font-size: 2.1rem;
  }
}

.personal {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--ink);
}

.personal-head {
  display: grid;
  gap: 0.15rem;
}

.personal-head .card-sub {
  margin: 0;
}

.personal-field {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.personal-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-top: 0.45rem;
}

.personal-control {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.state-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.state-button {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line-2);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink-2);
  border-radius: 0;
  border-color: var(--ink-2);
  background: transparent;
  font-weight: 600;
}

.state-button:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.state-button[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.personal-remove {
  padding: 0.4rem 0.8rem;
  font-size: 0.84rem;
  color: var(--ink-3);
}

.personal-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.personal-inline.end {
  justify-content: flex-end;
}

.personal-inline input {
  flex: 1 1 12rem;
  min-width: 0;
}

.personal-empty,
.personal-status {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-3);
}

.personal-status:empty {
  display: none;
}

.personal-control .chips {
  gap: 0.4rem;
}

@media (max-width: 720px) {
  .personal-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .personal-label {
    padding-top: 0;
  }
}

.personal textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font-read);
  border-radius: 0;
}

.chip.removable {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  cursor: pointer;
  border-radius: 0;
}

.chip.removable:hover {
  border-color: var(--alert);
  color: var(--alert);
}

.account-form {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.account-fields {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto minmax(160px, 1fr) auto minmax(120px, auto);
  gap: 0.5rem 0.7rem;
  align-items: center;
}

.account-fields input,
.account-fields select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
}

.account-row code {
  padding: 0.1rem 0.35rem;
  background: var(--brand-tint);
  border-radius: 0;
  user-select: all;
}

@media (max-width: 720px) {
  .account-fields {
    grid-template-columns: 1fr;
  }
}

.corpus-note {
  padding: 0.5rem 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* Contact: a see-through button in the page's top-right corner and the card it opens. Both are
   positioned against the page, not the viewport, so they scroll away with the header instead of
   floating over whatever the reader is looking at. */
.contact-button {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  border-radius: 0;
  border-color: var(--ink-2);
  background: var(--canvas);
  box-shadow: none;
}

.contact-button:hover,
.contact-button:focus-visible {
  border-color: var(--line-2);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink);
}

.contact-button .nav-icon {
  width: 16px;
  height: 16px;
  display: none;
}

.contact-card {
  position: absolute;
  inset: auto;
  top: 3.6rem;
  right: 1.25rem;
  margin: 0;
  min-width: 15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow), 0 8px 24px rgba(16, 24, 40, 0.12);
  padding: 0.9rem 1rem;
}

.contact-card .eyebrow {
  margin-bottom: 0.3rem;
}
.page-header .eyebrow {
  color: var(--kicker);
  font-size: 1rem;
}

#view-updates > .eyebrow {
  color: var(--kicker);
  font-size: 1rem;
}


.contact-name {
  margin: 0 0 0.2rem;
  font-family: var(--font-read);
  font-size: 1.05rem;
  font-weight: 600;
}

.contact-mail {
  color: var(--brand);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
  text-underline-offset: 3px;
  word-break: break-all;
}

/* On a phone the corner sits beside the brand name; the icon alone keeps it clear of the title. */
@media (max-width: 560px) {
  .contact-button {
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.3rem 0.5rem;
  }

  .contact-label {
    display: inline;
  }

  .contact-card {
    top: 3.3rem;
    right: 0.85rem;
  }
}

/* Bibliometrics (ADR-056): the upload form and the report in its sandboxed frame */

.bibliometrics-form {
  display: grid;
  gap: 0.2rem;
  max-width: 820px;
  padding: 1.1rem 1.25rem 1rem;
}

.bibliometrics-fields {
  display: grid;
  gap: 0.3rem;
}

.bibliometrics-fields input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

.bibliometrics-fields input[type="file"] {
  background: var(--surface-2);
  cursor: pointer;
}

.bibliometrics-fields .field-label {
  margin: 0.55rem 0 0;
}

.field-help {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.84rem;
  line-height: 1.5;
}

.field-optional {
  color: var(--ink-3);
  font-weight: 400;
}

.bibliometrics-form .dialog-actions {
  justify-content: flex-start;
  margin-top: 0.9rem;
}

.bibliometrics-form .status {
  margin-top: 0.6rem;
}

.bibliometrics-result {
  margin-top: 1rem;
  overflow: hidden;
}

.bibliometrics-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.bibliometrics-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bibliometrics-tools .nav-icon {
  margin-right: 0.35rem;
}
/* The sidebar, the account buttons, and the text buttons go without icons; a button or link that is
   only an icon keeps it. */
.search .nav-icon,
.literature-scroll .nav-icon,
.term-table-link .nav-icon {
  display: inline-flex;
}


.bibliometrics-focus-toggle[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
}

/* The report scrolls inside its frame, so its own table of contents stays in view. */
.bibliometrics-frame {
  display: block;
  width: 100%;
  height: max(640px, calc(100vh - 160px));
  border: 0;
  background: #ffffff;
}

@media (min-width: 861px) {
  body.bibliometrics-focus .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.bibliometrics-focus .sidebar,
  body.bibliometrics-focus .contact-button,
  body.bibliometrics-focus #view-bibliometrics .page-header,
  body.bibliometrics-focus #bibliometrics-form {
    display: none;
  }

  body.bibliometrics-focus .main:has(> #view-bibliometrics:not([hidden])) {
    max-width: none;
    padding: 0.6rem 0.8rem;
  }

  body.bibliometrics-focus .bibliometrics-result {
    margin-top: 0;
  }

  body.bibliometrics-focus .bibliometrics-frame {
    height: calc(100vh - 92px);
  }
}

@media (max-width: 860px) {
  .bibliometrics-focus-toggle {
    display: none;
  }

  .bibliometrics-frame {
    height: 80vh;
  }
}

/* The search record (ADR-057): optional fields under the upload, folded by default */

.bibliometrics-record {
  margin-top: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-2);
}

.bibliometrics-record > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 500;
}

.bibliometrics-record > summary::-webkit-details-marker {
  display: none;
}

.bibliometrics-record > summary::before {
  content: "▸";
  color: var(--ink-3);
  transition: transform 0.15s;
}

.bibliometrics-record[open] > summary::before {
  transform: rotate(90deg);
}

.bibliometrics-record-hint {
  flex-basis: 100%;
  padding-left: 1.05rem;
  color: var(--ink-3);
  font-size: 0.82rem;
  font-weight: 400;
}

.bibliometrics-record-fields {
  padding: 0 0.85rem 0.85rem;
}

.bibliometrics-fields textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--font-data);
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
}

.bibliometrics-record-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 0.75rem;
}

@media (max-width: 640px) {
  .bibliometrics-record-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The report from ASA's own corpus (ADR-062): a choice above the form, shown only to the accounts
   /bibliometrics/access lets in, and a short description in place of the upload */

.bibliometrics-source {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.bibliometrics-source .field-label {
  margin: 0;
}

.bibliometrics-source .segmented {
  justify-self: start;
  flex-wrap: wrap;
}
.segmented button + button {
  border-left: 1px solid var(--ink-2);
}

.segmented.small button + button {
  border-left: 1px solid var(--ink-2);
}


.bibliometrics-upload {
  display: grid;
  gap: 0.3rem;
}

.bibliometrics-corpus {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0;
  background: var(--brand-tint);
}

.bibliometrics-corpus-title {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.bibliometrics-corpus-status {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: 0.8rem;
  line-height: 1.5;
}

.bibliometrics-corpus-status.is-error {
  color: var(--alert);
}

@media (max-width: 640px) {
  .bibliometrics-source .segmented {
    justify-self: stretch;
  }

  .bibliometrics-source .segmented button {
    flex: 1 1 auto;
  }
}

/* Example questions and "Bu makaleye sor" (ADR-065) */

.suggestions-label {
  align-self: center;
  margin-right: 0.15rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  grid-column: 1 / -1;
  margin: 0 0 0.4rem;
}

.article-ask-lead {
  margin: 0 0 0.8rem;
  line-height: 1.45;
  color: var(--ink-2);
  font-size: 0.98rem;
}

.article-ask .composer {
  max-width: none;
  box-shadow: none;
  border-color: var(--ink-2);
}

.article-ask .composer textarea {
  min-height: 5rem;
  padding: 0.8rem 1rem 0.5rem;
  font-size: 1.1rem;
}

.article-ask .composer-bar {
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.6rem 1rem;
}

.article-ask-target {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 0.98rem;
}

.article-ask-target strong {
  font-weight: 500;
  color: var(--ink-2);
}

.article-ask .suggestions {
  grid-template-columns: minmax(0, 1fr);
}

.article-ask-status {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}

.article-ask-status.is-error {
  color: var(--alert);
}

.article-ask-answer {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.7rem;
}

/* In "Bu makaleye sor" the question leads and the answer follows, labelled, a size smaller. */
.article-ask-answer .answer-question {
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
}
.article-ask-answer .answer-question::before {
  font-family: var(--font-read);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.article-ask-answer .answer-label {
  margin: 0.3rem 0 -0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.answer-question::before {
  content: "Soru: ";
  font-weight: 700;
  color: var(--ink);
}


.article-ask-answer .answer-meta {
  margin: 0;
}
.answer-meta .pill:not(:last-child)::after {
  content: "|";
  margin: 0 0.6em;
  color: var(--line-2);
}


.article-ask-answer .callout {
  margin: 0;
}

.article-ask-answer .claim {
  padding: 0.8rem 0;
}
.claim:first-child {
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--ink);
}

.claim:first-child .claim-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


.article-ask-answer .claim-text {
  font-size: 1.02rem;
}
.article-ask-answer .claim:first-child {
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.article-ask-answer .claim:first-child .claim-number {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
.article-ask-answer .claim:first-child .claim-text {
  font-family: var(--font-read);
  font-size: 1.12rem;
  line-height: 1.5;
  max-width: none;
}
.claim:first-child .claim-text {
  font-family: var(--font-head);
  font-size: 2.15rem;
  line-height: 1.12;
  max-width: 34ch;
}


.profile-scope {
  margin: 0.1rem 0 0.2rem;
}

.profile-scope a {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  /* The bar stacks here (see .composer-bar above): one line, so its items take the bar's width
     rather than the long title's, and the basis would otherwise become a height. */
  .article-ask .composer-bar {
    flex-wrap: nowrap;
  }

  .article-ask-target {
    flex: none;
  }
}

/* Waiting for a model: spinner, stage, seconds (no new colours or fonts) */

.ai-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0.8rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.ai-progress-stage {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-progress-time {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.ai-progress-note {
  flex-basis: 100%;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.ai-progress-note[hidden] {
  display: none;
}

.ai-progress-slot {
  margin-bottom: 0.4rem;
}

.spinner {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ai-spin 0.9s linear infinite;
}

@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* A still ring: the stage text and the clock still say that work goes on. */
  .spinner {
    animation: none;
  }
}

#answer-heading {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

#evidence-heading {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* Charts (ADR-066): app.js draws them at the container's pixel width, so one SVG unit is one
   pixel and the labels keep their size on every screen. Text takes its colour from here only;
   shapes are filled with the --chart-* tokens. */

.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart text {
  font-family: var(--font-ui);
  font-size: 13px;
  fill: var(--ink-2);
}

.chart .chart-num {
  font-family: var(--font-data);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-3);
}

.chart .chart-end {
  fill: var(--ink);
  font-weight: 600;
}

.chart .chart-tick {
  font-size: 13px;
  fill: var(--ink-2);
}

.chart .chart-label {
  font-size: 14px;
  fill: var(--ink);
}

.chart .chart-strong {
  font-weight: 700;
}

.chart .chart-series {
  font-size: 13px;
  font-weight: 700;
}

.chart .chart-colhead {
  font-size: 12px;
  font-weight: 700;
}

.chart .chart-cite {
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--ink);
}

.chart .chart-cite.is-nearest {
  fill: var(--chart-accent);
}

.chart .chart-axis-title {
  font-size: 12.5px;
  fill: var(--ink-2);
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-base {
  stroke: var(--ink);
  stroke-width: 1;
}

.chart-leader {
  stroke: var(--ink-3);
  stroke-width: 0.8;
  fill: none;
}

.chart-hit {
  fill: transparent;
}

.chart-source {
  margin: 0.55rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* The key: small squares or dots above the plot, no box. */
.chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
}

.chart-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-key-swatch {
  width: 0.8rem;
  height: 0.8rem;
}

.chart-key-plain {
  font-weight: 400;
  color: var(--ink-3);
}

.chart-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

.chart-dot.is-ring {
  border: 1.5px solid var(--ink);
  background: var(--surface);
}

/* Notes from the data, with a thin arrow in ink. */
.chart-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.9;
}

.chart-arrow-head {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
}

.chart .chart-note text {
  font-size: 13px;
  fill: var(--ink);
}

.chart .chart-note .chart-note-head {
  font-weight: 700;
}

.chart .chart-note-plain {
  font-size: 12.5px;
  fill: var(--ink-2);
  font-style: italic;
}

/* Hover: the row or square under the pointer stays, the rest fade, a box gives the numbers. */
.chart.is-hovering .chart-group:not(.is-hot) rect:not(.chart-hit),
.chart.is-hovering .chart-group:not(.is-hot) circle,
.chart.is-hovering .chart-group:not(.is-hot) .chart-stem {
  opacity: 0.4;
}

.chart-tip {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 0.1rem;
  max-width: 300px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-2);
  pointer-events: none;
}

.chart-tip strong {
  color: var(--ink);
  font-weight: 700;
}

.chart-tip-hint {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* Years: the stacked area. The canvas-coloured edges keep the bands apart; the total gets a line. */
.chart-area-edge {
  fill: none;
  stroke: var(--canvas);
  stroke-width: 1;
}

.chart-area-edge.is-total {
  stroke: var(--ink-3);
}

.chart-guide {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* Full-text versions: the waffle and its list. */
.chart-waffle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.4rem 2.6rem;
}

.chart-waffle-grid .chart {
  width: auto;
  max-width: 100%;
}

.chart-waffle-scale {
  margin: 0.4rem 0 0;
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--ink-3);
}

.chart-waffle-legend {
  flex: 1 1 280px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-waffle-row {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.15s;
}

.chart-waffle-row:first-child {
  border-top: 1px solid var(--ink);
}

.chart-waffle-pct {
  font-family: var(--font-head);
  font-size: 2.7rem;
  line-height: 1;
  color: var(--ink-2);
}

.chart-waffle-row.is-lead .chart-waffle-pct {
  font-size: 3.4rem;
  color: var(--chart-accent);
}

.chart-waffle-text {
  display: grid;
  gap: 0.15rem;
}

.chart-waffle-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--ink);
}

.chart-waffle-count {
  font-size: 0.92rem;
  color: var(--ink-2);
}

.chart.is-hovering .chart-group:not(.is-hot) rect:not(.chart-hit) {
  opacity: 0.35;
}

.chart-waffle-legend:has(.is-hot) .chart-waffle-row:not(.is-hot) {
  opacity: 0.45;
}

/* Journals: the Cleveland dot plot. */
.chart-row-guide {
  stroke: var(--chart-row);
  stroke-width: 1;
}

.chart-dumbbell {
  stroke: var(--ink-3);
  stroke-width: 1.4;
}

.chart-dot-articles {
  fill: var(--chart-grey);
}

.chart-dot-analyzed {
  fill: var(--chart-accent);
}

.chart-dot-full-text {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* Evidence: the lollipop. The nearest source is the accent; an abstract is an open ring. */
.chart-stem {
  stroke: var(--chart-stem);
  stroke-width: 1.4;
}

.chart-stem.is-nearest {
  stroke: var(--chart-accent);
  stroke-width: 2.2;
}

.chart-lollipop {
  fill: var(--chart-grey);
  stroke: var(--chart-grey);
  stroke-width: 0;
}

.chart-lollipop.is-nearest {
  fill: var(--chart-accent);
  stroke: var(--chart-accent);
}

.chart-lollipop.is-abstract {
  fill: var(--canvas);
  stroke-width: 2;
}

/* The number strip: a small line of the years, or the share of the collection. */
.chart-spark {
  display: block;
  margin-top: 0.35rem;
  overflow: visible;
}

.chart-spark-area {
  fill: var(--chart-spark);
}

.chart-spark-line {
  fill: none;
  stroke: var(--chart-accent);
  stroke-width: 1.5;
}

.chart-spark-end,
.chart-share-fill {
  fill: var(--chart-accent);
}

.chart-share-track {
  fill: var(--chart-pale);
}

.chart-spark-year {
  font-family: var(--font-data);
  font-size: 10.5px;
  fill: var(--ink-3);
}

/* The corpus map (harita.js) */
.map-card {
  margin: 2.2rem 0;
}

.map-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 1.1rem 0 0.4rem;
}

.map-gate p {
  flex: 1 1 22rem;
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
}

.map-open {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--brand);
  border-radius: 0;
  background: var(--brand);
  font: 700 1rem var(--font-ui);
  color: var(--on-brand);
  text-decoration: none;
  cursor: pointer;
}

.map-open:hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem 1.2rem;
  margin: 0.4rem 0 0.8rem;
}

.map-field {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.map-select,
.map-search {
  min-width: 15rem;
  max-width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--surface);
  font: 400 0.95rem var(--font-ui);
  color: var(--ink);
}

/* On a line of its own, so a longer count never moves the map. */
.map-count {
  flex: 1 1 100%;
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--brand);
}

.map-stage {
  position: relative;
  height: 560px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
  overflow: hidden;
}

.map-stage.is-answer {
  height: 460px;
}

.map-stage:focus-within {
  box-shadow: inset 0 0 0 2px var(--brand);
}

.map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.map-canvas:focus {
  outline: none;
}

.map-wait {
  padding: 1rem;
  color: var(--ink-3);
}

.map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-region,
.map-mark,
.map-ring.is-hover {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.map-region {
  --ax: -50%;
  --ay: -50%;
  padding: 0 0.3rem;
  background: var(--chart-label-bg);
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--ink-2);
}

.map-ring {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.map-ring.is-hover {
  --ax: -8px;
  --ay: -8px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--map-accent);
}

.map-mark {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* The question: a large open ring (the accent points inside stay visible), its word on the left. */
.map-mark.is-question {
  --ax: calc(-100% + 15px);
  --ay: -15px;
  flex-direction: row-reverse;
}

.map-mark.is-question .map-ring {
  width: 30px;
  height: 30px;
  border-width: 1.5px;
}

.map-mark.is-cited {
  --ax: 20px;
  --ay: -50%;
}

.map-mark-text {
  padding: 0 0.3rem;
  background: var(--chart-label-bg);
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.map-mark.is-cited .map-mark-text {
  color: var(--brand);
}

.map-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  gap: 4px;
}

.map-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  font: 600 1.05rem var(--font-ui);
  color: var(--ink);
  cursor: pointer;
}

.map-button:hover,
.map-button[aria-pressed="true"] {
  background: var(--surface-2);
}

.map-tip {
  max-width: 340px;
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  margin: 0.7rem 0 0.3rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.map-sym {
  display: inline-block;
  flex: none;
  border-radius: 50%;
}

.map-sym.is-accent {
  width: 10px;
  height: 10px;
  background: var(--map-accent);
}

.map-sym.is-base {
  width: 7px;
  height: 7px;
  background: var(--map-point);
}

.map-sym.is-question {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink);
}

.map-sym.is-region {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0.3rem;
  background: var(--chart-label-bg);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-2);
}

.map-sym.is-region::before {
  content: "bayesian";
}

.map-note {
  max-width: 70ch;
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.map-help {
  margin: 0.35rem 0 0;
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* Under an answer: the fold that opens the map. */
.answer-map {
  margin-top: 1.6rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.answer-map > summary {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0.8rem 0 0.8rem 1.6rem;
  cursor: pointer;
  list-style: none;
}

.answer-map > summary::-webkit-details-marker {
  display: none;
}

.answer-map > summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.65rem;
  font: 600 1.3rem var(--font-data);
  color: var(--brand);
}

.answer-map[open] > summary::before {
  content: "−";
}

.answer-map-title {
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
}

.answer-map-sub {
  font-size: 0.92rem;
  color: var(--ink-3);
}

.answer-map-body {
  padding-bottom: 1rem;
}

@media (max-width: 860px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }

  .page-title {
    font-size: 2.15rem;
  }

  .suggestions {
    grid-template-columns: minmax(0, 1fr);
  }

  .claim:first-child .claim-text {
    font-size: 1.75rem;
  }

  .detail {
    padding: 0.8rem 1rem 1.2rem;
  }

  .detail-title {
    font-size: 2rem;
  }

  .lead {
    font-size: 1.35rem;
  }

  .tile-value {
    font-size: 1.9rem;
  }

  /* The profile's five tabs do not fit one line on a phone: they wrap, ruled like a grid. */
  #view-profile .toolbar > .segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    max-width: 100%;
    background: var(--ink-2);
  }

  #view-profile .toolbar > .segmented button {
    flex: 1 1 auto;
    border-left: 0;
    background: var(--canvas);
  }

  #view-profile .toolbar > .segmented button[aria-pressed="true"] {
    background: var(--brand);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .chart-grow-x {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: chart-grow-x 0.75s cubic-bezier(0.2, 0.7, 0.25, 1) both;
  }

  .chart-fade,
  .chart-note.is-fading {
    animation: chart-fade 0.5s ease both;
  }

  .chart-area-grow {
    animation: chart-reveal 1.1s cubic-bezier(0.3, 0.6, 0.3, 1) both;
  }
}

@keyframes chart-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes chart-fade {
  from {
    opacity: 0;
  }
}

@keyframes chart-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 700px) {
  .tile-value {
    font-size: 2.9rem;
  }

  .map-stage {
    height: 420px;
  }

  .map-stage.is-answer {
    height: 380px;
  }

  .map-select,
  .map-search {
    min-width: 0;
    width: 100%;
  }

  .map-field {
    flex: 1 1 100%;
  }

  .chart-waffle-row {
    grid-template-columns: 4.8rem minmax(0, 1fr);
  }

  .chart-waffle-pct,
  .chart-waffle-row.is-lead .chart-waffle-pct {
    font-size: 2.3rem;
  }
}

/* The panel's collection switch (ADR-070): the article list's segmented control, under the lead. */

.panel-switch {
  margin-top: 0.9rem;
}

.panel-map-note {
  margin: 0 0 2.2rem;
  color: var(--ink-3);
}

/* The method audit card of the panel's biostatistics view: the item chart for signed-in readers,
   in the panel's chart language and the colours of the article card, and the day's audit spend
   above it (signed-in readers only). The collection's numbers are the view's own tiles. */

.biostat-card {
  margin: 2.2rem 0;
}

.biostat-spend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  /* The card's head already draws the rule above it. */
  margin: -0.4rem 0 1.2rem;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--line-2);
}

.biostat-spend-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  min-width: 0;
}

.biostat-spend-label {
  font-weight: 700;
  color: var(--ink);
}

.biostat-spend-value {
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.biostat-spend-note {
  font-size: 0.88rem;
  color: var(--ink-3);
}

.biostat-plot {
  position: relative;
  margin: 0;
}

.biostat-seg {
  stroke: var(--surface);
  stroke-width: 1;
}

.biostat-hatch-line {
  stroke: var(--chart-grey);
  stroke-width: 1.6;
}

.biostat-swatch {
  flex: none;
}

.biostat-swatch-na {
  background: var(--chart-na);
  outline: 1px solid var(--chart-grid);
}

.biostat-row {
  cursor: pointer;
  outline: none;
}

.biostat-row-bg {
  fill: transparent;
}

.biostat-row:hover .biostat-row-bg,
.biostat-row:focus-visible .biostat-row-bg {
  fill: var(--surface-2);
}

.biostat-row.is-selected .biostat-row-bg {
  fill: var(--brand-tint);
}

.biostat-row:focus-visible .biostat-row-bg {
  stroke: var(--brand);
  stroke-width: 1.5;
}

.chart .biostat-row.is-selected .chart-label {
  font-weight: 700;
}

.chart .biostat-item-no {
  fill: var(--ink-3);
  font-weight: 600;
}

.biostat-notes {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0 0;
  padding: 0.8rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  max-width: 82ch;
}

.biostat-notes li {
  color: var(--ink-2);
}

.biostat-notes strong {
  color: var(--ink);
}

.biostat-sample {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--ink-3);
  background: var(--surface-2);
  font-size: 0.92rem;
  color: var(--ink-2);
  max-width: 82ch;
}

.biostat-sample.is-early {
  border-left-color: var(--warn);
}

.biostat-sample strong {
  color: var(--ink);
}

.biostat-empty {
  margin: 0;
}

.biostat-list {
  margin: 1.2rem 0 0;
  border-top: 2px solid var(--ink);
}

.biostat-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0 0.6rem;
  border-bottom: 1px solid var(--line-2);
}

.biostat-list-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.biostat-list-head p {
  margin: 0.15rem 0 0;
  color: var(--ink-3);
}

.biostat-list-close {
  flex: none;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  font: 600 0.92rem var(--font-ui);
  color: var(--ink);
  cursor: pointer;
}

.biostat-list-close:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.biostat-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 26rem;
  overflow-y: auto;
}

.biostat-list-items li {
  border-bottom: 1px solid var(--line);
}

.biostat-list-items a {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0;
  color: inherit;
  text-decoration: none;
}

.biostat-list-items a:hover .biostat-list-name,
.biostat-list-items a:focus-visible .biostat-list-name {
  color: var(--brand);
  text-decoration: underline;
}

.biostat-list-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.biostat-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-3);
}

.biostat-list-tag {
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 700;
}

.biostat-list-tag.is-not_found {
  color: var(--alert);
  background: var(--alert-tint);
}

.biostat-list-tag.is-inconsistent {
  color: var(--warn);
  background: var(--warn-tint);
}

.biostat-list-tag.is-conditional {
  color: var(--ink-3);
  border-style: dashed;
}

/* The biostatistics collection (2026-10-10): the collection switch, the PICO summary, and the
   method audit card. The card follows the preview of the same day (asa-guvenilirlik, biyoistatistik
   onizleme): "found" in navy, "check" in the alert brick, the arithmetic warning in mustard,
   conditional and not applicable in grey. Every class carries the audit- prefix. The card's
   columns depend on the room the detail panel gives it, not on the window, so it is a container. */

.audit-pico .section-tools {
  gap: 0.4rem;
}

.audit-design {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.audit-pico .lead {
  margin-top: 0;
}

.audit-pico-facts {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.45rem 1.2rem;
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.audit-pico-facts dt {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.audit-pico-facts dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.audit {
  container-type: inline-size;
  container-name: audit;
}

.audit-meta {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.audit-note {
  margin: 0 0 0.9rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--brand);
  font-size: 0.95rem;
  color: var(--ink-2);
}

.audit-none {
  margin: 0;
  color: var(--ink-2);
}

.audit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-2);
}

.audit-strip > div {
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border-right: 1px solid var(--line-2);
}

.audit-strip > div:last-child {
  border-right: 0;
}

.audit-strip b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
}

.audit-strip span {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.audit-strip .is-found b {
  color: var(--brand);
}

.audit-strip .is-check b {
  color: var(--alert);
}

.audit-strip .is-conditional b {
  color: var(--mute);
}

.audit-strip .is-arithmetic b {
  color: var(--warn);
}

/* Three widths of the card: four columns as in the preview when the panel is wide; the item's
   name over its status beside the evidence in the detail panel of an ordinary screen; one
   column on a phone. */
.audit-head,
.audit-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 11rem) minmax(0, 9.5rem) minmax(0, 1fr);
  grid-template-areas: "no name state evidence";
  gap: 0 0.9rem;
}

.audit-no {
  grid-area: no;
}

.audit-name {
  grid-area: name;
}

.audit-state {
  grid-area: state;
}

.audit-evidence {
  grid-area: evidence;
}

.audit-head {
  margin-top: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-3);
}

.audit-table {
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-item {
  align-items: start;
  padding: 0.8rem 0 0.85rem;
  border-bottom: 1px solid var(--line);
}

.audit-no {
  padding-top: 0.05rem;
  font-family: var(--font-data);
  font-size: 0.9rem;
  color: var(--ink-3);
}

.audit-name {
  min-width: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.audit-name small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-3);
}

.audit-status {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
}

.audit-glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  border: 1.5px solid currentColor;
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.audit-glyph.is-found {
  color: var(--brand);
}

.audit-glyph.is-check {
  color: var(--alert);
  background: var(--alert-tint);
}

.audit-glyph.is-conditional {
  color: var(--mute);
  border-style: dashed;
}

.audit-glyph.is-na {
  color: var(--line-2);
  border-color: transparent;
}

.audit-glyph.is-arithmetic {
  color: var(--warn);
  background: var(--warn-tint);
}

.audit-item.is-found .audit-status {
  color: var(--brand);
}

.audit-item.is-check .audit-status {
  color: var(--alert);
}

.audit-item.is-arithmetic .audit-status {
  color: var(--warn);
}

.audit-item.is-conditional .audit-status,
.audit-item.is-na .audit-status {
  color: var(--ink-3);
  font-weight: 500;
}

.audit-item.is-na .audit-name {
  color: var(--ink-3);
  font-weight: 600;
}

.audit-evidence {
  min-width: 0;
  font-size: 0.96rem;
  color: var(--ink-2);
}

.audit-evidence p {
  margin: 0;
}

.audit-item.is-conditional .audit-evidence,
.audit-item.is-na .audit-evidence {
  font-size: 0.9rem;
  color: var(--ink-3);
}

.audit-quote {
  margin: 0 0 0.55rem;
  padding: 0.05rem 0 0.05rem 0.75rem;
  border-left: 3px solid var(--line-2);
}

.audit-quote:last-child {
  margin-bottom: 0;
}

.audit-quote q {
  display: block;
  quotes: "\201C" "\201D";
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.audit-quote q.is-table {
  font-family: var(--font-data);
  font-size: 0.82rem;
  line-height: 1.5;
}

.audit-quote cite {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-size: 0.74rem;
  font-style: normal;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.audit-subnote {
  display: inline-flex;
  align-items: center;
  margin: 0.45rem 0.4rem 0 0;
  padding: 0.12rem 0.5rem;
  border-left: 3px solid var(--warn);
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
}

.audit-sought {
  color: var(--ink-2);
}

.audit-findings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-findings li + li {
  margin-top: 0.55rem;
}

.audit-finding {
  display: block;
  font-family: var(--font-data);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--warn);
  overflow-wrap: anywhere;
}

.audit-finding-source {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.audit-hidden {
  margin-top: 0.5rem !important;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.audit-foot {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-3);
}

@container audit (max-width: 719px) {
  .audit-head {
    display: none;
  }

  .audit-item {
    grid-template-columns: 2rem minmax(0, 10.5rem) minmax(0, 1fr);
    grid-template-areas:
      "no name evidence"
      "no state evidence"
      "no . evidence";
    grid-template-rows: auto auto 1fr;
    gap: 0.3rem 0.9rem;
  }
}

@container audit (max-width: 459px) {
  .audit-item {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    grid-template-areas:
      "no name"
      "no state"
      "no evidence";
    grid-template-rows: auto;
    gap: 0.25rem 0.5rem;
  }

  .audit-evidence {
    margin-top: 0.2rem;
  }

  .audit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-strip > div:nth-child(2) {
    border-right: 0;
  }

  .audit-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-2);
  }
}

@media (max-width: 560px) {
  .audit-pico-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .audit-pico-facts dd {
    margin-bottom: 0.6rem;
  }
}