/* Readable catalog and in-page detail layout. Load after atlas.css.
   Map canvas, sprite dimensions, origins and zoom calculations stay in atlas.css. */
:root {
  --ink: #243e32;
  --muted: #566859;
  --line: #d6ddce;
  --paper: #f7f6ef;
  --white: #fffefa;
}

body { font-size: 15px; line-height: 1.65; }
.wrap { width: calc(100% - 48px); max-width: 1380px; }
button, a, input, select { touch-action: manipulation; }
input::placeholder { color: #6b7668; opacity: 1; }
.topbar { height: 72px; }
.brand { gap: 11px; }
.brand img { width: 61px; height: 61px; }
.brand span { font-size: 18px; }
.brand small { font-size: 10px; letter-spacing: 1.3px; color: #d0ddc6; }
.topbar nav { gap: 26px; font-size: 14px; }
.topbar nav a { padding-block: 10px; }
.home-link { font-size: 13px; color: #d0ddc6; padding-left: 23px; }
.hero-content { padding: 20px 0 18px; }
.eyebrow { font-size: 11px; color: #766036; letter-spacing: 1.4px; }
.hero-content h1 { font-size: 28px; line-height: 1.4; margin: 6px 0; }
.hero-content p { font-size: 14px; color: #405d45; }
.search-form { margin-top: 12px; padding: 5px 5px 5px 15px; gap: 12px; }
.search-form input { height: 36px; font-size: 15px; }
.search-form button { font-size: 14px; padding: 8px 23px; min-height: 40px; }
.search-form kbd { font-size: 11px; color: #5d6b54; }
.quick-search { font-size: 12px; gap: 14px; margin-top: 8px; color: #51694c; }
.quick-search span { color: #566c4f; }
.quick-search button { min-height: 26px; }

.atlas-body { padding-top: 22px; padding-bottom: 28px; }
.catalog-intro { gap: 14px; margin-bottom: 14px; }
.catalog-intro h2 { font-size: 24px; margin-top: 2px; }
.catalog-intro p { font-size: 12px; color: var(--muted); }
.category-tabs a { min-height: 53px; padding: 12px 10px; font-size: 15px; gap: 10px; }
.category-tabs small { font-size: 12px; color: #62715a; }
.category-tabs a[aria-current] small { color: #e3e8ce; }
.catalog-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 24px; margin-top: 20px; }
.filters { top: 18px; padding-right: 20px; }
.filter-heading { margin-bottom: 15px; }
.filter-heading h3 { font-size: 15px; }
.filter-heading button { font-size: 12px; color: #53674b; min-height: 30px; }
.filter-field { margin-bottom: 15px; }
.filter-field > label { font-size: 13px; color: #3f583e; margin-bottom: 5px; }
.filter-field select, .filter-field input { font-size: 13px; min-height: 40px; border-color: #b9c7b0; }
.filter-note { margin-top: 20px; padding-top: 17px; }
.filter-note strong { font-size: 13px; }
.filter-note p { font-size: 12px; color: var(--muted); line-height: 1.75; }
.tiny-leaf { margin-bottom: 4px; }
.results-section { min-width: 0; }
.results-toolbar { min-height: 36px; margin: 16px 0 11px; gap: 14px; }
.results-toolbar p { font-size: 15px; }
.results-toolbar small { font-size: 12px; color: var(--muted); }
.results-toolbar select { min-height: 36px; font-size: 13px; border-color: #b9c7b0; max-width: 146px; }
.results { gap: 12px; }
.entry { min-height: 138px; padding: 14px; border-color: #d5ddcd; }
.entry-main { gap: 12px; margin-top: 10px; }
.entry-name { font-size: 17px; line-height: 1.5; color: #25462f; }
.entry-meta { font-size: 12px; line-height: 1.65; color: #56694e; margin-top: 5px; }
.entry-id { font-size: 12px; color: #65725e; }
.kind { font-size: 12px; color: #5e6e55; }
.entry-arrow { color: #526e43; }
.entry.restricted .entry-meta { color: #80602c; }
.mini-stats { font-size: 12px; line-height: 1.5; color: #5f7055; gap: 12px; flex-wrap: wrap; margin-top: 11px; }
.mini-stats b { font-weight: 600; color: #3b6036; }
.map-results .art { height: 118px; flex-basis: 118px; }
.map-results .entry-name { font-size: 17px; }
.map-results .entry-meta { font-size: 12px; color: #56694e; }
.pagination { margin: 22px 0 8px; }
.pagination button { width: 36px; height: 36px; font-size: 14px; }
.pagination button:disabled { color: #788371; }
.loading-state, .empty-state { padding: 42px 20px; color: #5a6d50; font-size: 14px; }
.empty-state p { font-size: 14px; }

.item-browser, .region-browser { padding: 17px 18px; background: #f0f3e8; border-color: #cbd8c0; }
.browse-heading h3, .region-heading h3 { font-size: 18px; color: #264d33; }
.browse-heading p, .region-heading p { font-size: 13px; line-height: 1.6; color: #526a48; }
.region-heading > button { font-size: 13px; color: #3e6334; min-height: 32px; }
.item-categories { margin: 13px 0; }
.item-categories button { font-size: 14px; color: #365d2d; min-height: 56px; }
.item-categories small { font-size: 12px; color: #5d7351; }
.weapon-browser h4, #consumable-browser h4 { font-size: 14px; color: #3d5b34; margin: 8px 0; }
.browse-options button { font-size: 13px; min-height: 36px; color: #3f6034; padding: 6px 10px; }
.browse-options small { font-size: 12px; color: #5b7150; }
.browse-note, .region-context { font-size: 12px; line-height: 1.7; color: #5c6e51; }
.equipment-matrix caption { color: #52694a; font-size: 12px; padding: 10px 12px; }
.equipment-matrix tbody th { width: 80px; padding: 8px 0; }
.equipment-matrix th button { font-size: 13px; color: #31542b; }
.equipment-matrix td { padding: 8px 10px; }
.equipment-slot-options { gap: 6px; }
.equipment-matrix .equipment-slot-options button { font-size: 13px; min-height: 34px; color: #35552e; }
.equipment-slot-options small { font-size: 12px; color: #5a704e; }
.region-groups { margin: 13px 0 10px; }
.region-groups button { font-size: 13px; min-height: 35px; color: #3d6033; }
.region-groups small { font-size: 12px; opacity: 1; }
.region-options { max-height: 162px; }
.region-options button { font-size: 13px; min-height: 35px; color: #3d5c33; }
.region-options small { font-size: 12px; color: #5b7050; }
.active-filters { margin-top: 11px; }
.active-filters button { font-size: 12px; color: #506943; min-height: 32px; }
.active-filters strong { color: #31582b; }
.category-browser { gap: 7px; margin-bottom: 13px; }
.category-browser button { font-size: 14px; padding: 8px 14px; color: #456338; min-height: 38px; }
.category-browser small { font-size: 12px; opacity: 1; }

.quest-group-title { font-size: 14px; color: #3d5f32; padding: 10px 12px; }
.quest-group-title:not(:first-child) { margin-top: 13px; }
.quest-row { min-height: 99px; padding: 13px 12px; gap: 12px; }
.quest-title { font-size: 17px; line-height: 1.5; color: #294c30; }
.quest-meta, .quest-tags { font-size: 12px; color: #596f4e; line-height: 1.6; }
.quest-tags em { color: #805c29; }
.quest-level small, .quest-level b.unspecified { font-size: 12px; color: #586e4b; }
.quest-level b { font-size: 23px; }
.quest-require, .quest-reward { font-size: 13px; line-height: 1.65; color: #405c36; }
.quest-require small, .quest-reward small { font-size: 12px; color: #617252; margin-bottom: 2px; }
.quest-chevron { color: #5c784c; }
.quest-row.restricted .quest-title { color: #5d6954; }

/* Details are part of the page and grow with their content, not a dialog. */
#detail.inline-detail {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 20px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  scroll-margin-top: 18px;
}
#detail.inline-detail::backdrop { background: transparent; backdrop-filter: none; }
.inline-detail .detail-shell { border: 1px solid #cbd6c1; border-radius: 7px; background: #f4f5ec; overflow: visible; }
.inline-detail .detail-toolbar {
  position: static;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 49px;
  padding: 8px 18px;
  border-radius: 6px 6px 0 0;
  background: #e7eddd;
  border-bottom: 1px solid #c9d5bc;
  color: #36582d;
}
.inline-detail .detail-toolbar > span { margin-left: 0; font: 13px/1.5 'Malgun Gothic', sans-serif; letter-spacing: 0; color: #506b43; }
.inline-detail .detail-toolbar button { font-size: 13px; min-height: 32px; color: #34572c; font-weight: 600; }
.inline-detail .detail-toolbar #detail-close { margin-left: auto; padding: 5px 12px; border: 1px solid #b6c7a8; border-radius: 4px; background: #fffef7; font: 600 13px/1.5 'Malgun Gothic', sans-serif; }
.inline-detail .detail-toolbar #detail-back:disabled { opacity: 1; color: #76846c; }
.inline-detail #detail-content { min-width: 0; overflow: visible; }
.inline-detail .detail-head { padding: 22px 24px; gap: 20px; background: #fffef8; }
.inline-detail .detail-art { width: 100px; height: 100px; flex: 0 0 100px; background: #f4f5e9; }
.inline-detail .detail-art img { max-width: 90px; max-height: 90px; }
.inline-detail .detail-heading { min-width: 0; flex: 1; }
.inline-detail .detail-heading h2, .inline-detail .detail-head h2 { font-size: 26px; line-height: 1.4; margin: 5px 0 7px; }
.inline-detail .detail-id { font-size: 12px; color: #62724f; margin-left: 10px; }
.inline-detail .detail-subtitle { font-size: 14px; color: #52694a; line-height: 1.6; }
.inline-detail .share-link { font-size: 12px; min-height: 36px; padding: 6px 11px; color: #3f6034; border-color: #b6c7a8; background: #fffefa; }
.inline-detail .detail-body { padding: 20px 24px 24px; }
.inline-detail .detail-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 20px; }
.inline-detail[data-type=item] .detail-grid { grid-template-columns: 330px minmax(0, 1fr); }
.inline-detail[data-type=monster] .detail-grid, .inline-detail[data-type=quest] .detail-grid { grid-template-columns: 360px minmax(0, 1fr); }
.inline-detail[data-type=map] .detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
.inline-detail .detail-primary, .inline-detail .detail-related { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.inline-detail .detail-section { margin: 0; padding: 16px; border: 1px solid #d8dfce; border-radius: 5px; background: #fffefa; min-width: 0; }
.inline-detail .detail-section h3 { font-size: 16px; line-height: 1.5; margin: 0 0 12px; border-left-color: #a88847; padding-left: 9px; color: #2e512e; }
.inline-detail .detail-description { font-size: 14px; line-height: 1.85; color: #425c3d; margin-bottom: 0; }
.inline-detail .detail-primary > .detail-description, .inline-detail .detail-related > .detail-description { padding: 1px 2px; }
.inline-detail .detail-section + .detail-section { margin-top: 0; }
.inline-detail .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-color: #d6decb; background: #d6decb; }
.inline-detail .stat { padding: 10px 11px; }
.inline-detail .stat small { font-size: 12px; color: #5c704d; margin-bottom: 3px; }
.inline-detail .stat strong { font-size: 15px; color: #2f502b; line-height: 1.5; }
.inline-detail .relation-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.inline-detail .detail-related .relation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-detail[data-type=map] .detail-related .relation-list { grid-template-columns: minmax(0, 1fr); }
.inline-detail .relation { font-size: 14px; gap: 10px; padding: 10px; min-height: 62px; line-height: 1.6; border-color: #d7dfcc; background: #fbfcf5; align-items: center; min-width: 0; }
.inline-detail .relation img { width: 35px; height: 35px; flex: 0 0 35px; }
.inline-detail .relation-name { min-width: 0; overflow-wrap: anywhere; color: #33552c; }
.inline-detail .relation-name small { font-size: 12px; color: #586e4a; line-height: 1.65; margin-top: 3px; }
.inline-detail .relation-value { max-width: 32%; white-space: normal; overflow-wrap: anywhere; font: 12px/1.6 'Malgun Gothic', sans-serif; color: #436b35; text-align: right; }
.inline-detail .relation-hint { font-size: 12px; color: #5a704c; }
.inline-detail .more-relations { min-height: 34px; font-size: 13px; color: #426a32; margin-top: 8px; }
.inline-detail .detail-note { margin-bottom: 0; padding: 12px 14px; font-size: 13px; line-height: 1.8; color: #705b29; border-color: #d9cc9f; background: #fcf4da; }
.inline-detail .detail-small { font-size: 12px; line-height: 1.8; color: #596e4c; margin: 7px 0; }
.inline-detail .job-list { font-size: 13px; color: #4e6840; margin-top: 0; }
.inline-detail .conditional-drops { padding: 12px; margin-top: 0; border-radius: 5px; }
.inline-detail .conditional-drops summary { font-size: 13px; color: #3d6330; line-height: 1.7; }
.inline-detail .conditional-drops .detail-section { margin-top: 12px; padding: 12px; }

/* Preserve the verified map layout while making its controls readable. */
.inline-detail .detail-section:has(> .map-explorer) { padding: 14px; }
.map-tools { gap: 9px; flex-wrap: wrap; padding: 9px 10px; }
.map-modes button, .map-mode-label { font-size: 12px; color: #486b38; min-height: 34px; }
.map-zoom { font-size: 12px; gap: 4px; color: #456b34; flex-wrap: wrap; }
.map-zoom button { min-height: 34px; min-width: 34px; }
.map-zoom #map-zoom-label { font-size: 12px; width: 76px; }
.map-zoom button:last-child, .map-zoom #map-expand { font-size: 12px; min-width: 84px; padding: 0 9px; }
.map-position-status { font-size: 12px; color: #425f32; line-height: 1.65; }
.map-selection { font-size: 13px; color: #526b43; line-height: 1.6; flex-wrap: wrap; }
.map-legend { gap: 6px; padding: 10px; }
.mob-legend-entry, .mob-legend-all, .mob-legend-all b { font-size: 12px; color: #3e632f; }
.mob-legend-entry small { font-size: 12px; color: #5a7548; }
.map-mob-label { font-size: 12px; }
.map-footnote { font-size: 12px; color: #5a6d4d; }
.map-explorer:fullscreen { padding: 12px; }
.map-explorer:fullscreen .map-legend { max-height: 156px; }
.inline-detail.map-expanded {
  position: fixed !important; inset: 0 !important; z-index: 1000;
  width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--paper) !important;
}
.inline-detail.map-expanded .detail-shell { height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.inline-detail.map-expanded #detail-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.inline-detail.map-expanded .detail-head, .inline-detail.map-expanded .detail-related { display: none; }
.inline-detail.map-expanded .detail-body.detail-grid { display: flex; flex: 1; min-height: 0; padding: 8px; }
.inline-detail.map-expanded .detail-primary { flex: 1; min-height: 0; gap: 0; }
.inline-detail.map-expanded .detail-primary > :not(.detail-section:has(.map-explorer)) { display: none; }
.inline-detail.map-expanded .detail-section:has(.map-explorer) { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; padding: 0; }
.inline-detail.map-expanded .detail-section:has(.map-explorer) > h3,
.inline-detail.map-expanded .map-footnote { display: none; }
.inline-detail.map-expanded .map-explorer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.inline-detail.map-expanded .map-viewport { flex: 1; height: auto; min-height: 0; max-height: none; }
.inline-detail.map-expanded .map-legend { max-height: 150px; overflow: auto; flex-shrink: 0; }
.inline-detail.map-expanded .map-tools, .inline-detail.map-expanded .map-selection { flex-shrink: 0; }

.data-note { margin-top: 24px; padding-top: 18px; font-size: 12px; color: #5b6f4f; grid-template-columns: 130px 1fr; gap: 12px 20px; }
.data-note strong { font-size: 14px; color: #3e6033; }
.data-note p, .data-note button { font-size: 12px; color: #536b47; }
.data-note button { padding-top: 0; min-height: 28px; }
footer { padding: 23px 0; }
.footer-inner span, .footer-inner a { font-size: 12px; color: #d3dec9; }
.toast { font-size: 14px; max-width: calc(100% - 32px); }

@media (max-width: 1180px) {
  .catalog-layout { grid-template-columns: 168px minmax(0, 1fr); gap: 19px; }
  .filters { padding-right: 16px; }
  .inline-detail .detail-grid, .inline-detail[data-type=monster] .detail-grid,
  .inline-detail[data-type=quest] .detail-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 16px; }
  .inline-detail .detail-related .relation-list { grid-template-columns: minmax(0, 1fr); }
  .quest-row { grid-template-columns: 48px 38px minmax(130px, 1fr) 145px 10px; gap: 10px; }
  .quest-require { display: none; }
}
@media (max-width: 940px) {
  .topbar nav { gap: 19px; }
  .home-link { display: none; }
  .inline-detail .detail-grid, .inline-detail[data-type=item] .detail-grid,
  .inline-detail[data-type=monster] .detail-grid, .inline-detail[data-type=quest] .detail-grid,
  .inline-detail[data-type=map] .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .inline-detail .detail-related .relation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-detail[data-type=map] .detail-related .relation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 28px); }
  .topbar { height: 66px; }
  .brand { gap: 7px; }
  .brand img { height: 53px; width: 53px; }
  .brand span { font-size: 15px; }
  .brand small { font-size: 9px; letter-spacing: .7px; }
  .topbar nav { gap: 14px; font-size: 13px; }
  .hero-content { padding: 17px 0 15px; }
  .hero-content h1 { font-size: 25px; max-width: 440px; letter-spacing: -.6px; }
  .hero-content p { font-size: 13px; max-width: none; line-height: 1.65; }
  .search-form { margin-top: 11px; padding-left: 11px; gap: 7px; }
  .search-form input { font-size: 15px; }
  .search-form button { font-size: 13px; padding: 8px 16px; }
  .quick-search { font-size: 12px; gap: 12px; margin-top: 6px; }
  .atlas-body { padding-top: 18px; }
  .catalog-intro { gap: 4px; margin-bottom: 12px; }
  .catalog-intro h2 { font-size: 22px; }
  .catalog-intro p { font-size: 12px; }
  .category-tabs a { padding: 11px 3px; min-height: 61px; font-size: 13px; gap: 3px; }
  .category-tabs small { font-size: 12px; }
  .catalog-layout { display: block; margin-top: 16px; }
  .filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; padding: 0 0 15px; margin-bottom: 15px; }
  .filter-field { margin: 0; min-width: 0; }
  .filter-heading { margin-bottom: 0; }
  .filter-field > label { font-size: 12px; }
  .filter-field select, .filter-field input { font-size: 14px; min-height: 40px; }
  .filter-note { display: none; }
  .results { gap: 9px; }
  .entry { padding: 12px; min-height: 156px; }
  .entry-main { margin-top: 9px; gap: 8px; }
  .entry-name, .map-results .entry-name { font-size: 17px; }
  .entry-meta, .map-results .entry-meta, .kind, .entry-id { font-size: 12px; }
  .entry-id { line-height: 1.4; }
  .entry-top { align-items: flex-start; gap: 5px; flex-wrap: wrap; }
  .entry-arrow { right: 9px; bottom: 8px; }
  .mini-stats { font-size: 12px; gap: 6px 10px; }
  .results-toolbar { gap: 8px; margin: 14px 0 10px; }
  .results-toolbar p { font-size: 14px; }
  .results-toolbar small { font-size: 12px; }
  .results-toolbar select { font-size: 12px; min-height: 36px; max-width: 112px; }
  .item-browser, .region-browser { padding: 13px 11px; }
  .browse-heading h3, .region-heading h3 { font-size: 17px; }
  .browse-heading p, .region-heading p { font-size: 12px; }
  .region-heading > button { font-size: 12px; padding: 3px 0; }
  .item-categories button { font-size: 13px; min-height: 53px; }
  .item-categories small, .browse-options small, .browse-note { font-size: 12px; }
  .browse-options button { font-size: 13px; min-height: 35px; padding: 5px 8px; }
  .equipment-matrix tbody th, .equipment-matrix th:first-child { width: 65px; min-width: 0; padding: 8px 0; }
  .equipment-matrix th button { font-size: 12px; }
  .equipment-matrix td { padding: 8px 7px; }
  .equipment-matrix .equipment-slot-options button { font-size: 12px; padding: 6px 8px; }
  .equipment-slot-options small { font-size: 12px; }
  .region-groups { margin-top: 10px; flex-wrap: wrap; overflow: visible; }
  .region-groups button, .region-options button { font-size: 13px; min-height: 35px; }
  .region-groups small, .region-options small, .region-context { font-size: 12px; }
  .active-filters button { font-size: 12px; }
  .category-browser button { font-size: 13px; padding: 8px 12px; }
  .category-browser small { font-size: 12px; }
  .quest-row { grid-template-columns: 45px 34px minmax(0, 1fr) 9px; gap: 8px 9px; padding: 12px 9px; }
  .quest-title { font-size: 17px; }
  .quest-main { grid-column: 3; }
  .quest-level { padding-right: 6px; }
  .quest-level b { font-size: 22px; }
  .quest-level small, .quest-level b.unspecified { font-size: 12px; }
  .quest-meta, .quest-tags { font-size: 12px; }
  .quest-require, .quest-reward { display: block; grid-column: 3; font-size: 12px; margin-top: 0; }
  .quest-require small, .quest-reward small { font-size: 12px; color: #627553; margin-right: 5px; display: inline; }
  .quest-require span, .quest-reward > span { display: inline; }
  .quest-group-title { font-size: 13px; padding: 10px; }
  .inline-detail .detail-toolbar { gap: 7px 12px; padding: 8px 11px; }
  .inline-detail .detail-toolbar > span { font-size: 12px; }
  .inline-detail .detail-toolbar button, .inline-detail .detail-toolbar #detail-close { font-size: 12px; }
  .inline-detail .detail-head { padding: 17px 15px; gap: 14px; }
  .inline-detail .detail-art { width: 82px; height: 82px; flex-basis: 82px; }
  .inline-detail .detail-art img { max-width: 74px; max-height: 74px; }
  .inline-detail .detail-heading h2, .inline-detail .detail-head h2 { font-size: 24px; }
  .inline-detail .detail-id { font-size: 12px; margin-left: 7px; }
  .inline-detail .detail-subtitle { font-size: 13px; }
  .inline-detail .share-link { width: auto; margin-left: auto; font-size: 12px; }
  .inline-detail .detail-body { padding: 14px 12px 17px; }
  .inline-detail .detail-grid { gap: 14px; }
  .inline-detail .detail-section { padding: 13px; }
  .inline-detail .detail-section h3 { font-size: 16px; }
  .inline-detail .detail-related .relation-list,
  .inline-detail[data-type=map] .detail-related .relation-list { grid-template-columns: minmax(0, 1fr); }
  .inline-detail .detail-section:has(> .map-explorer) { padding: 10px; }
  .inline-detail .detail-description { font-size: 14px; }
  .map-tools { padding: 8px; gap: 7px; }
  .map-modes button, .map-mode-label { font-size: 12px; padding: 6px 8px; }
  .map-zoom { gap: 3px; }
  .map-zoom button { min-width: 32px; min-height: 34px; }
  .map-zoom #map-zoom-label { font-size: 12px; width: 72px; }
  .map-zoom #map-expand { min-width: 76px; font-size: 12px; margin-left: 3px; padding: 0 6px; }
  .map-selection, .map-position-status, .map-footnote { font-size: 12px; }
  .mob-legend-entry, .mob-legend-entry small, .mob-legend-all, .mob-legend-all b { font-size: 12px; }
  .map-explorer:fullscreen { padding: 0; }
  .map-explorer:fullscreen .map-tools { padding: 8px; }
  .data-note { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .data-note p, .data-note button { font-size: 12px; }
  .data-note button { grid-column: 1; }
  .footer-inner strong { font-size: 12px; }
  .footer-inner span, .footer-inner a { font-size: 12px; }
}
@media (max-width: 380px) {
  .brand small { display: none; }
  .brand span { font-size: 14px; }
  .brand img { height: 47px; width: 47px; }
  .topbar nav { gap: 10px; font-size: 12px; }
  .category-tabs a { font-size: 12px; }
  .entry { padding: 10px; }
  .quest-row { grid-template-columns: 40px minmax(0, 1fr) 9px; gap: 8px; }
  .quest-row .quest-art { display: none; }
  .quest-main, .quest-require, .quest-reward { grid-column: 2; }
  .quest-chevron { grid-column: 3; }
}

/* Keep the selected record visible near the top of the catalog. */
.detail-open .atlas-body { padding-top: 12px; }
.detail-open .catalog-intro { align-items: center; gap: 8px; margin-bottom: 9px; }
.detail-open .catalog-intro h2 { font-size: 20px; line-height: 1.4; margin: 0; }
.detail-open .catalog-intro .eyebrow,
.detail-open .detail-head .eyebrow { display: none; }
.detail-open .category-tabs a { min-height: 45px; padding-block: 9px; }
.detail-open #detail.inline-detail { margin-top: 12px; }
.detail-open .inline-detail .detail-toolbar { min-height: 42px; padding-block: 5px; }
.detail-open .inline-detail .detail-head { padding: 16px 20px; gap: 16px; }
.detail-open .inline-detail .detail-art { width: 64px; height: 64px; flex-basis: 64px; }
.detail-open .inline-detail .detail-art img { max-width: 58px; max-height: 58px; }
.detail-open .inline-detail .detail-heading h2,
.detail-open .inline-detail .detail-head h2 { font-size: 22px; margin: 0 0 4px; }
.detail-open .inline-detail .detail-body { padding-top: 16px; }
.inline-detail .detail-related .relation { min-height: 76px; }
.inline-detail[data-type=item] .detail-related .relation img { width: 46px; height: 46px; flex-basis: 46px; }
#detail-title[tabindex='-1']:focus { outline: none; }
.inline-detail .relation-list > .relation:only-child { grid-column: 1 / -1; }
#about-content { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 700px) {
  .detail-open .catalog-intro { flex-direction: row; flex-wrap: wrap; }
  .detail-open .catalog-intro h2 { font-size: 19px; }
  .detail-open .category-tabs a { min-height: 58px; padding-block: 8px; }
  .detail-open .inline-detail .detail-head { padding: 14px; gap: 12px; }
  .detail-open .inline-detail .detail-heading h2,
  .detail-open .inline-detail .detail-head h2 { font-size: 22px; }
  .detail-open .inline-detail .detail-body { padding-top: 13px; }
  .inline-detail[data-type=item] .detail-related .relation img { width: 42px; height: 42px; flex-basis: 42px; }
}