/* ResearchFinder: one stylesheet for the whole site.
   Order: design tokens -> base -> layout -> components -> states -> small screens. */

/* ---------- Design tokens ---------- */
:root {
  /* One brand colour (orange) + neutrals */
  --orange: #ea580c;
  --orange-dark: #c2410c;
  --orange-soft: #fff4ec;
  --orange-line: #fed7aa;

  --text: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --bg: #fafaf9;
  --surface: #ffffff;
  --grey-soft: #f5f5f4;

  /* Two text sizes, plus headings */
  --size-body: 15px;
  --size-small: 13px;

  --radius: 10px;
  --radius-small: 6px;
  --gap: 16px;
  --topbar-height: 64px;
}

/* Night mode: same tokens, dark values. --orange-dark flips to a lighter
   tint because it is mostly text/link colour and #c2410c is unreadable on
   a dark background. */
html[data-theme="dark"] {
  --text: #e8e6e3;
  --muted: #a39e99;
  --line: #2e3238;
  --bg: #0f1115;
  --surface: #171a21;
  --grey-soft: #1e222a;
  --orange-soft: #2b1608;
  --orange-line: #59301a;
  --orange-dark: #fb923c;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.25; }
h2 { font-size: 16px; }
h3 { font-size: 16px; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: var(--size-small); }

/* ---------- Layout ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  min-height: var(--topbar-height);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--orange); }

.page {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}
.narrow { max-width: 800px; }

/* Compact discovery page; the homepage keeps its title-only suggestions. */
.explore-more { display: inline-block; margin-top: 8px; font-size: var(--size-small); color: var(--orange-dark); text-decoration: none; }
.explore-more:hover, .explore-source:hover { text-decoration: underline; }
.explore-page { max-width: 800px; margin: 0 auto; }
.explore-intro { margin-top: 8px; color: var(--muted); }
.explore-section { margin-top: 28px; }
.explore-section h2 { font-size: 19px; }
.explore-note { margin-top: 8px; color: var(--muted); font-size: var(--size-small); }
.explore-paper { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.explore-paper h3 a { text-decoration: none; }
.explore-paper h3 a:hover { color: var(--orange-dark); text-decoration: underline; }
.explore-meta, .explore-reason { margin-top: 4px; font-size: var(--size-small); color: var(--muted); }
.explore-source { display: inline-block; margin-top: 6px; font-size: var(--size-small); color: var(--orange-dark); text-decoration: none; }

.footer {
  padding: 20px;
  text-align: center;
  font-size: var(--size-small);
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.search-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}
/* A grid item defaults to min-width: auto, so it refuses to shrink below its
   content and pushes the 1fr track wider than the page. A long Interpreted-as
   line or a long Matched topics line then drags the whole card past the right
   edge, taking View profile with it. Letting the column shrink keeps the card
   inside the viewport and makes its text wrap instead. */
.search-layout > * { min-width: 0; }

/* ---------- Links & buttons ---------- */
.link {
  color: var(--orange-dark);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }
.link-disabled { color: var(--muted); }

.button-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: var(--orange-dark);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.button-link:hover { background: var(--orange); color: #fff; }

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--orange-dark);
  font-weight: 600;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ---------- Search bar ---------- */
.searchbar {
  flex: 1;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.searchbar:focus-within { border-color: var(--orange); }

.searchbar-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
}
.searchbar-input:focus { outline: none; }
.searchbar-input::placeholder { color: #a8a29e; }
html[data-theme="dark"] .searchbar-input::placeholder { color: #6b7280; }

/* Search / Ask toggle: radio inputs are hidden, their labels look like buttons */
.mode-toggle {
  display: flex;
  padding: 3px;
  background: var(--grey-soft);
  border-radius: var(--radius-small);
}
.mode-toggle label { position: relative; cursor: pointer; }
.mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mode-toggle span {
  display: block;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--muted);
}
.mode-toggle input:checked + span { background: var(--surface); color: var(--orange-dark); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.mode-toggle input:focus-visible + span { outline: 2px solid var(--orange); }

.go-button {
  padding: 8px 18px;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.go-button:hover { background: var(--orange-dark); }

.searchbar-hero { margin: 32px auto 0; padding: 6px; box-shadow: 0 4px 16px rgb(28 25 23 / 0.06); }
.searchbar-hero .searchbar-input { padding: 12px 14px; font-size: 17px; }
.searchbar-hero .go-button { padding: 11px 24px; }

/* ---------- Home ---------- */
.hero {
  max-width: 760px;
  margin: 8vh auto 0;
  text-align: center;
}
.hero h1 { font-size: 34px; }
.hero-sub { margin-top: 12px; font-size: 18px; }
.hero-note { margin-top: 6px; color: var(--muted); }

/* Lightweight home suggestions; full titles remain in the accessible link text. */
.paper-suggestions { margin: 16px 0 0; text-align: left; }
.paper-suggestion {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-small); text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.paper-suggestion:hover, .paper-suggestion:focus-visible {
  background: var(--orange-soft); color: var(--orange-dark);
}
.paper-suggestion:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.paper-suggestion-icon { flex: none; }
.paper-suggestion-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .paper-suggestion-title {
    white-space: normal; overflow-wrap: anywhere; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
}

.mode-help {
  margin: 28px auto 0;
  display: grid;
  gap: 10px;
  text-align: left;
  color: var(--muted);
  font-size: var(--size-small);
  width: fit-content;
}
.mode-help li { display: flex; align-items: center; gap: 10px; }

.info-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Filters ---------- */
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filters-summary { display: none; }  /* only shown on small screens */

.filter-current { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filter-heading { font-size: var(--size-small); margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  color: var(--orange-dark);
  font-size: var(--size-small);
}
.chip a { color: var(--orange-dark); font-weight: 600; font-size: 12px; }

.filter-group + .filter-group { border-top: 1px solid var(--line); }
.filter-group summary,
.filters-summary {
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  justify-content: space-between;
}
.filter-group summary { display: flex; }
.filter-group summary::-webkit-details-marker,
.filters-summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "▸"; color: var(--muted); transition: transform 0.15s; }
.filter-group[open] summary::after { transform: rotate(90deg); }

.filter-options { padding: 0 8px 10px; }
.filter-option {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  text-decoration: none;
  font-size: var(--size-small);
}
.filter-option:hover { background: var(--grey-soft); }
.filter-option.selected { background: var(--orange-soft); color: var(--orange-dark); font-weight: 600; }
.filter-option.selected::before { content: "✓ "; }

.filter-search {
  display: block;
  width: calc(100% - 16px);
  margin: 8px 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--size-small);
}
.filter-search:focus { outline: none; border-color: var(--orange); }

/* Topic has ~3,600 options; the search box above narrows this scrollable
   box instead of letting the list push the whole page down indefinitely. */
#topic-options { max-height: 280px; overflow-y: auto; }

/* ---------- Results ---------- */
.interpreted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topic-tag {
  padding: 2px 10px;
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  font-size: var(--size-small);
  font-weight: 600;
  /* OpenAlex topic names run long enough that five of them fill four or five
     rows and push the results off the screen. Each tag is cut to roughly a
     quarter of the column so the line stays one or two rows; the full name is
     on the title attribute and in the filter panel. */
  max-width: 15rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 2px;
  margin: 18px 0 16px;
  border-bottom: 1px solid var(--line);
  /* Six result types with counts do not fit one row beside the sidebar:
     wrap rather than hide the last tabs behind a sideways scroll. */
  flex-wrap: wrap;
}
.tab {
  padding: 8px 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--orange-dark); border-bottom-color: var(--orange); }

.notice {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--grey-soft);
  border-radius: var(--radius-small);
  color: var(--muted);
  font-size: var(--size-small);
}

.card-list { display: grid; gap: 12px; }
.card {
  display: flex;
  /* When the text is wide enough that the two cannot sit side by side, the
     button drops onto its own line under the body instead of being pushed
     off the right edge. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap);
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--orange-line); }
.card-body { min-width: 0; flex: 1 1 22rem; }
.card-title { overflow-wrap: anywhere; }
.card-meta { margin-top: 2px; color: var(--muted); font-size: var(--size-small); }
.card-topics { margin-top: 6px; font-size: var(--size-small); overflow-wrap: anywhere; }

.pagination { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.pagination a,
.pagination span {
  min-width: 34px;
  padding: 5px 10px;
  border-radius: var(--radius-small);
  text-align: center;
  text-decoration: none;
}
.pagination a:hover { background: var(--grey-soft); }
.pagination .current { background: var(--orange); color: #fff; font-weight: 600; }
.pagination .disabled { color: var(--line); }

/* ---------- Profile & Ask ---------- */
.profile-head { margin-bottom: 20px; }
.profile-head h1 { overflow-wrap: anywhere; }
.profile-meta { margin: 4px 0 6px; color: var(--muted); }

.question { margin-bottom: 18px; font-size: 20px; font-weight: 600; }
.question-label { color: var(--orange); }

.section { margin-top: 28px; }
.section h2 {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.plain-list { display: grid; gap: 8px; }

.source-list { display: grid; gap: 6px; }
.source-list li {
  padding: 6px 10px;
  border-radius: var(--radius-small);
  font-size: var(--size-small);
  scroll-margin-top: calc(var(--topbar-height) + 16px);  /* don't hide under the sticky bar */
  transition: background 0.3s;
}
.source-list li:target { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }
.source-num { margin-right: 4px; color: var(--muted); font-weight: 600; }

/* ---------- AI box ---------- */
.ai-box {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--orange-line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
}
.ai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.badge {
  padding: 2px 10px;
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  font-size: 12px;
}
.ai-body:empty { display: none; }
.interests { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: var(--size-small); }

.cite {
  margin-left: 1px;
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: 2px;
}
.cite:hover { text-decoration: underline; }

.degraded-notice {
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--grey-soft);
  border-radius: var(--radius-small);
  color: var(--muted);
  font-size: var(--size-small);
}

/* Loading skeleton, visible only while .loading is on the box */
.skeleton { display: none; }
.ai-box.loading .skeleton { display: grid; gap: 8px; }
.skeleton span {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--grey-soft) 25%, var(--orange-soft) 50%, var(--grey-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton span:last-child { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- States ---------- */
.state {
  max-width: 520px;
  margin: 48px auto;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
}
.state h1 { color: var(--text); }
.results .state { margin: 32px auto; }

.insufficient { display: flex; gap: 12px; align-items: flex-start; }
.insufficient-title { color: var(--text); font-weight: 600; }
.insufficient p + p { color: var(--muted); }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: 10px; }
  .searchbar { flex-basis: 100%; flex-wrap: wrap; }
  .searchbar-input { flex-basis: 100%; }
  .mode-toggle { flex: 1; }
  .mode-toggle label { flex: 1; text-align: center; }

  .hero { margin-top: 3vh; }
  .hero h1 { font-size: 26px; }

  /* Filters move above the results and can be collapsed */
  .search-layout { grid-template-columns: 1fr; gap: 16px; }
  .filters-summary { display: flex; }
  .filters-summary::after { content: "▾"; color: var(--muted); }
  .filters .filter-current { border-top: 1px solid var(--line); }

  .card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Network graph (researcher ego graph) ---------- */
.graph-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Fill the space between topbar and footer like an Obsidian graph view */
  height: calc(100vh - var(--topbar-height) - 90px);
  min-height: 460px;
}

.graph-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.graph-view-switch {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.view-chip {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(17, 20, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a8adb8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.view-chip:hover:not(:disabled) { color: #f5f5f4; }

.view-chip.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #ffffff;
}

.view-chip:disabled { opacity: 0.4; cursor: default; }

.graph-canvas {
  position: relative;
  flex: 1;
  /* Quiet near-black canvas with a subtle vignette, Obsidian-style */
  background: radial-gradient(circle at 50% 38%, #1d2027 0%, #13151a 78%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Cytoscape's private layer: cy.destroy() empties this, never the siblings
   (panel, legend, tooltip) that share the canvas with it. */
.graph-mount {
  position: absolute;
  inset: 0;
}

.graph-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #cbd5e1;
  font-size: var(--size-body);
  z-index: 1;
}

.graph-legend-wrap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

.graph-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  background: rgba(17, 20, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a8adb8;
  font-size: 12px;
}

.graph-legend-button {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(17, 20, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a8adb8;
  font-size: 13px;
  cursor: pointer;
}

.graph-legend-button:hover { color: #f5f5f4; }

.legend-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.legend-item .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot-researcher { background: #c2c7cf; }
.dot-institution { background: #6fb5a7; }

.legend-hint { color: #6b7280; }

.graph-tooltip {
  position: absolute;
  max-width: 320px;
  padding: 6px 10px;
  border-radius: var(--radius-small);
  background: rgba(17, 20, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-size: var(--size-small);
  pointer-events: none;
  z-index: 3;
}

.profile-head .network-link { color: var(--orange-dark); }

/* Graph display panel (Obsidian-style controls) */
.graph-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.graph-panel-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(17, 20, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a8adb8;
  font-size: 15px;
  cursor: pointer;
}

.graph-panel-button:hover { color: #f5f5f4; }

.graph-panel-body {
  display: grid;
  gap: 10px;
  min-width: 200px;
  padding: 12px 14px;
  background: rgba(17, 20, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-small);
  color: #a8adb8;
  font-size: 12px;
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.panel-row input[type="checkbox"],
.panel-row input[type="range"] { accent-color: #f97316; cursor: pointer; }

.panel-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.panel-seg .seg {
  padding: 3px 9px;
  border: 0;
  background: transparent;
  color: #a8adb8;
  font-size: 11px;
  cursor: pointer;
}

.panel-seg .seg + .seg { border-left: 1px solid rgba(255, 255, 255, 0.1); }

.panel-seg .seg.active { background: rgba(249, 115, 22, 0.85); color: #ffffff; }

.panel-row .panel-slider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel-row .panel-slider input[type="range"] { width: 88px; }

.panel-row #pref-limit-value {
  min-width: 2ch;
  text-align: right;
  color: #e5e7eb;
  font-variant-numeric: tabular-nums;
}

.panel-reset {
  padding: 5px 10px;
  border-radius: var(--radius-small);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
  font-size: 12px;
  cursor: pointer;
}

.panel-reset:hover { background: rgba(255, 255, 255, 0.1); }

/* Theme toggle in the topbar */
.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--text); border-color: var(--muted); }

/* Browser-local Ask history */
.access-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 24px auto; text-align: left; }
.access-form input[type="password"] { padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
.access-form button { padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; cursor: pointer; }
.access-form input:focus-visible, .access-form button:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 3px; }
.history-nav { font-size: var(--size-small); white-space: nowrap; }
.history-settings { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.history-settings p, .history-import p { margin-top: 6px; }
.history-settings summary, .history-import summary { cursor: pointer; }
.history-settings details { margin-top: 8px; }
.history-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.history-import { margin: 16px 0; }
.history-import label { display: block; margin: 10px 0; }
.history-import input { max-width: 100%; }
#history-page button, #history-page select {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
#history-page button:disabled { opacity: .5; cursor: default; }
.history-list li { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.history-list li > div { min-width: 0; overflow-wrap: anywhere; }
.history-list a { color: var(--orange-dark); }
#history-status { margin: 12px 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; gap: 12px; }
  .topbar-inner .searchbar { order: 3; flex-basis: 100%; }
  .history-nav { margin-left: auto; }
}