:root {
  --brand-color: #2b3a42;
  --brand-hover: #3d5561;
  --brand-font: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html.a11y-large { font-size: 125%; }
* { box-sizing: border-box; }
body {
  font-family: var(--brand-font);
  margin: 0;
  color: #1a1a1a;
  background: #fafafa;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--brand-color);
  color: #fff;
}
.topbar .brand { color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem; }
.topbar nav a { color: #cfe0e6; margin-left: 20px; text-decoration: none; }
.topbar nav a:hover { color: #fff; }
.nav-form { display: inline; margin-left: 20px; }
.nav-link-btn { background: none; border: none; color: #cfe0e6; padding: 0; font: inherit; cursor: pointer; }
.nav-link-btn:hover { color: #fff; }
main { max-width: 960px; margin: 0 auto; padding: 24px; }

.search-form { margin-bottom: 16px; }
.search-form input[type=text] { flex: 1; padding: 10px 12px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
.search-form button, .upload-form button, .link-btn { padding: 10px 16px; border: none; background: var(--brand-color); color: #fff; border-radius: 4px; cursor: pointer; }
.search-form button:hover, .upload-form button:hover, .link-btn:hover { background: var(--brand-hover); }
.link-btn:disabled { background: #aaa; cursor: not-allowed; }

.advanced-search { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px; }
.advanced-search .search-row { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.advanced-search label { display: flex; flex-direction: column; font-size: 0.85rem; color: #444; gap: 4px; flex: 1; min-width: 160px; }
.advanced-search input, .advanced-search select { padding: 8px 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
.advanced-search button { margin-top: 4px; }
.exact-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #666; font-weight: normal; }
.exact-toggle input { padding: 0; width: auto; }
.search-error { color: #8a1f1f; background: #f6d6d6; padding: 10px 14px; border-radius: 4px; margin: 10px 0; }

table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 24px; }
table th, table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; }
table thead th { background: #f0f0f0; }
table tbody tr:hover { background: #eef5f7; cursor: pointer; }

table.fields { width: auto; min-width: 480px; }
table.fields th { width: 140px; background: #f5f5f5; }

.result-count { color: #555; }

.image-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.image-card { width: 220px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px; }
.image-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
.image-caption { font-size: 0.8rem; color: #555; margin: 6px 0; word-break: break-all; }

.upload-form { margin: 16px 0; padding: 16px; background: #fff; border: 1px dashed #bbb; border-radius: 6px; }
.upload-form label { display: block; margin-bottom: 8px; }

.link-form { position: relative; margin-top: 8px; }
.record-search { width: 100%; padding: 6px 8px; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; }
.autocomplete-results { position: absolute; z-index: 5; background: #fff; border: 1px solid #ccc; width: 100%; max-height: 160px; overflow-y: auto; }
.autocomplete-item { padding: 6px 8px; font-size: 0.8rem; cursor: pointer; }
.autocomplete-item:hover { background: #eef5f7; }

.badge { display: inline-block; background: #e0eaee; color: var(--brand-color); font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; margin-right: 4px; }
.badge-error { background: #f6d6d6; color: #8a1f1f; }
.badge-estimated { background: #fdeecb; color: #7a5a1e; font-weight: 600; }
.extracted-text { font-size: 0.75rem; color: #666; font-style: italic; }
.suggest-form { margin-top: 8px; }
.suggest-btn { background: #2f6b3a; width: 100%; }
.suggest-btn:hover { background: #3d8a4c; }

.edit-link { font-size: 0.9rem; font-weight: normal; margin-left: 10px; color: var(--brand-color); }

.edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin: 16px 0; }
.edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #444; }
.edit-form label.full-width { grid-column: 1 / -1; }
.edit-form input, .edit-form textarea { padding: 8px 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
.edit-form button { grid-column: 1 / -1; padding: 10px 16px; border: none; background: var(--brand-color); color: #fff; border-radius: 4px; cursor: pointer; justify-self: start; }
.edit-form button:hover { background: var(--brand-hover); }

.history-table { font-size: 0.85rem; }

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.chip-label { font-size: 0.8rem; color: #666; }
.chip { background: #e0eaee; color: var(--brand-color); border: none; border-radius: 14px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.chip:hover { background: #cddce2; }

.search-form .clear-btn { background: #fff; color: var(--brand-color); border: 1px solid #ccc; margin-left: 8px; }
.search-form .clear-btn:hover { background: #f0f0f0; }

.autocomplete-field { position: relative; }

.year-range-field { flex: 1; min-width: 240px; }
.year-range-field > label { font-size: 0.85rem; color: #444; margin-bottom: 4px; display: block; }
.year-range-boxes { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.year-range-boxes input { width: 80px; padding: 6px 8px; font-size: 0.9rem; border: 1px solid #ccc; border-radius: 4px; }

.year-slider { position: relative; height: 28px; --range-lo: 0%; --range-hi: 100%; }
.year-slider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%);
  background: #ddd; border-radius: 2px;
}
.year-slider::after {
  content: ""; position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  left: var(--range-lo); right: calc(100% - var(--range-hi));
  background: var(--brand-color); border-radius: 2px;
}
.year-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; margin: 0; height: 28px;
  background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.year-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; background: var(--brand-color); cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.year-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-color);
  cursor: pointer; border: 2px solid #fff;
}
.year-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.year-slider input[type="range"]::-moz-range-track { background: transparent; }

.content-item { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.content-item form { display: inline-block; margin-top: 8px; margin-right: 6px; }
.content-body { white-space: pre-wrap; }
.link-preview { display: flex; gap: 12px; align-items: flex-start; }
.link-preview img { width: 100px; height: 70px; object-fit: cover; border-radius: 4px; }
.badge-active { background: var(--brand-color); color: #fff; }
.badge-estimated-note { background: #fdeecb; color: #7a5a1e; padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; }

.findagrave-card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 14px; margin-bottom: 16px; }
.findagrave-icon { width: 40px; height: 48px; flex-shrink: 0; }
.findagrave-info { display: flex; flex-direction: column; gap: 4px; }
.findagrave-dates { font-size: 0.85rem; color: #555; }
.findagrave-link { align-self: flex-start; margin-top: 4px; font-size: 0.85rem; }

.a11y-toggle-btn { background: none; border: 1px solid #cfe0e6; color: #cfe0e6; border-radius: 4px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer; margin-left: 20px; }
.a11y-toggle-btn:hover { color: #fff; border-color: #fff; }

/* Layouts that used to be inline styles -- pulled into classes so mobile
   media queries below can actually override them (inline styles beat any
   external stylesheet rule short of !important). */
.layout-sidebar { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; margin-top: 1rem; }
.layout-photos { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
.layout-photos.layout-photos-none { grid-template-columns: 1fr; }
.middle-initial-field { flex: 0 0 120px; }
.search-row-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.search-row-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; }
.photo-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.result-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1.5rem; }
.result-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.9rem; color: #666; margin-bottom: 1rem; }

@media print {
  .topbar, .no-print, form, .chip-row { display: none !important; }
  main { max-width: 100%; padding: 0; }
  .image-card { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Phone/small-tablet layout. Everything above this point is the desktop
   layout; below narrows step by step so nothing requires horizontal
   scrolling to reach (tables are the one exception -- they scroll within
   their own box rather than reflowing, since squeezing a wide record table
   into a card layout would be a much bigger template rewrite). */
@media (max-width: 800px) {
  main { padding: 16px; }
  .layout-sidebar { grid-template-columns: 1fr; gap: 1rem; }
  .layout-sidebar aside { display: none; } /* Popular Surnames / Recent Searches -- desktop-only convenience, not core search */
  .layout-photos { grid-template-columns: 1fr; }
  .result-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .topbar nav a, .nav-form, .a11y-toggle-btn { margin-left: 0; }

  main { padding: 12px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }

  .advanced-search { padding: 12px; }
  .advanced-search .search-row { gap: 10px; }
  .search-row-grid-2, .search-row-grid-4, .edit-form { grid-template-columns: 1fr; }
  .middle-initial-field { flex: 1 1 auto; }

  /* Wide tables (record field list, search-result detail tables, staff
     review lists) scroll horizontally in place instead of squeezing text
     illegibly or breaking the page's own width. */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.fields { min-width: 0; width: 100%; }
  table.fields td, table.fields th { white-space: normal; }

  .photo-grid-2col { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .image-grid { gap: 10px; }
  .image-card { width: calc(50% - 5px); }

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

  .result-card-details { grid-template-columns: 1fr; }
}