/* Paper, type and wayfinding shared by the region index and map editions. */
:root {
  --font-scale: 1.6;
  --atlas-paper: #faf9f5;
  --atlas-page: #fffefb;
  --atlas-ink: #243831;
  --atlas-secondary: #54625a;
  --atlas-accent: #8b4032;
  --atlas-rule: #d8dcd3;
  --atlas-tint: #edf1eb;
  --atlas-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --atlas-serif: Georgia, "Noto Serif CJK SC", "Songti SC", SimSun, "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ink: var(--atlas-ink);
  --border: var(--atlas-rule);
  --red: var(--atlas-accent);
  --paper: var(--atlas-paper);
  color-scheme: light;
}
:root[data-font-size="standard"] { --font-scale: 1.35; }
:root[data-font-size="large"] { --font-scale: 1.85; }
:lang(ja) { --atlas-serif: Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif; }
:where(a, button, select, summary, input):focus-visible { outline: 2px solid #2b6353; outline-offset: 2px; }
.region-index select, .topbar select {
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  color: var(--atlas-secondary);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.topbar .header-right select { max-width: none; }
.region-index select:hover, .topbar select:hover { color: var(--atlas-ink); background: var(--atlas-tint); }

/* One masthead and one set of operating tabs leave the map in view. */
body:has(.workspace) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  font-family: var(--atlas-sans);
}
.topbar {
  height: auto;
  min-height: 64px;
  gap: 18px;
  padding: 8px 24px;
  background: var(--atlas-page);
}
.workspace { height: auto; }
.atlas-heading, .brand { display: flex; align-items: center; min-width: 0; }
.atlas-heading { gap: 18px; }
.topbar .brand { flex-shrink: 0; gap: 9px; margin: 0; min-height: 40px; color: var(--atlas-secondary); font-size: .92em; }
.edition-menu { position: relative; }
.edition-menu summary { list-style: none; cursor: pointer; }
.edition-menu summary::-webkit-details-marker { display: none; }
.edition-links {
  position: absolute;
  inset: 100% auto auto 0;
  z-index: 1;
  min-width: max-content;
  max-height: min(65dvh, 21em);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--atlas-rule);
  border-radius: 4px;
  background: var(--atlas-page);
  box-shadow: 0 5px 14px #24383120;
}
.edition-links a { display: block; min-height: 44px; padding: .5em .8em; line-height: 1.4; color: var(--atlas-ink); text-decoration: none; }
.edition-links a[aria-current] { font-weight: 650; background: var(--atlas-tint); }
.edition-links a:is(:hover, :focus-visible) { background: #e4eae2; }
.edition-links a[data-edition="japan"] { margin-top: 3px; border-top: 1px solid var(--atlas-rule); }
.topbar:has(.edition-menu[open]) { position: relative; z-index: 20; }
.brand:hover span { text-decoration: underline; text-underline-offset: .22em; }
.atlas-title { margin: 0; padding-inline-start: 18px; border-inline-start: 1px solid var(--atlas-rule); font: 600 1.48em/1.25 var(--atlas-serif); letter-spacing: .02em; }
.header-right { gap: 15px; color: var(--atlas-secondary); font-size: .92em; }
.header-right .font-setting { border-inline-start: 1px solid var(--atlas-rule); padding-inline-start: 14px; }
.font-setting > span { font-size: inherit; }
.sidebar { background: var(--atlas-page); }
.sidebar .sidebar-tabs { position: static; padding: 0 20px; gap: 22px; }
.sidebar .sidebar-tabs button { min-height: 46px; padding: 8px 1px; font-size: .96em; color: var(--atlas-secondary); }
.sidebar-tabs button:hover { background: transparent; color: var(--atlas-accent); }
.sidebar .sidebar-tabs button[aria-selected=true] { color: var(--atlas-ink); font-weight: 650; }
.sidebar-tabs button[aria-selected=true]::after { height: 2px; background: var(--atlas-accent); }
.search-box, .route-input, .profile-search input { border: 1px solid #bbc4ba; background: var(--atlas-page); border-radius: 3px; }
.search-box input, .route-input input { font-size: .98em; }
input::placeholder, .profile-search input::placeholder { color: #626f66; }
.search-box:focus-within, .route-input:focus-within { border-color: #396453; box-shadow: 0 0 0 1px #396453; }
.operator-filters { gap: 2px; margin: 10px 0 16px; }
.operator-filters button { flex: 0 1 auto; min-height: 32px; padding: 4px 8px; border-radius: 2px; background: transparent; color: var(--atlas-secondary); font-size: .86em; }
.operator-filters button:hover { background: var(--atlas-tint); }
.operator-filters button[aria-pressed=true] { font-weight: 650; color: var(--atlas-ink); background: #e1e9df; }
.list-heading { margin: 0 0 6px; min-height: 30px; color: var(--atlas-ink); font-size: 1em; font-weight: 600; }
.list-heading button, .line-count { color: var(--atlas-secondary); font-size: calc(11px * var(--font-scale, 1.12)); font-weight: 400; }
.line-count, .group-label b { font-variant-numeric: tabular-nums; }
.group-label { align-items: baseline; margin: 22px 0 4px; padding: 8px 0; border-bottom: 1px solid var(--atlas-rule); font-size: .86em; letter-spacing: .02em; color: var(--atlas-secondary); }
.group-label b { padding: 0; font-size: 1em; background: none; }
.line-row { padding-inline: 4px; gap: 12px; min-height: 51px; border-color: #e7e9e2; border-radius: 0; }
.line-row-info strong, .station-result strong { font-size: 1em; color: var(--atlas-ink); }
.line-row:hover, .station-result:hover { background: #f1f3ed; }
.line-row.selected { background: var(--atlas-tint); }
.inline-line-detail .line-intro { background: #f6f7f1; border: 0; border-radius: 0; }
.sidebar-footer { justify-content: flex-start; padding: 6px 20px; gap: 16px; background: var(--atlas-paper); }
.sidebar-footer #guide-button, .line-badge { min-width: 2.25em; min-height: 2.25em; width: auto; padding-inline: .2em; }
.sidebar-footer { flex-wrap: wrap; }
.time-breakdown { grid-template-columns: repeat(auto-fit, minmax(min(5em, 100%), 1fr)); }
.sidebar-footer #footer-about, #clear-selection {
  min-height: 36px; color: var(--atlas-secondary); font-size: calc(11px * var(--font-scale, 1.12)); text-decoration: none;
}
.sidebar-footer button:hover, .list-heading button:hover { background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.line-badge { min-width: 2.25em; min-height: 2.25em; width: auto; padding-inline: .2em; }
.sidebar-footer { flex-wrap: wrap; }
.time-breakdown { grid-template-columns: repeat(auto-fit, minmax(min(5em, 100%), 1fr)); }
.sidebar-footer #footer-about { margin-left: auto; }

/* The map controls are a single, quiet instrument strip. */
.map-controls button { line-height: 1; }
.map-top { top: 16px; right: 16px; left: 16px; }
.map-tools { align-items: center; flex-flow: row wrap; justify-content: flex-end; gap: 8px; max-width: 100%; pointer-events: none; }
.view-switch, .map-tools .map-modes, .map-legend, .map-controls, .mobile-panel {
  border: 1px solid #bec8bd; border-radius: 4px; background: var(--atlas-page); box-shadow: 0 1px 4px #1c322016;
}
.view-switch, .map-tools .map-modes { align-self: auto; align-items: stretch; margin: 0; padding: 2px; pointer-events: auto; }
.view-switch button, .map-tools .map-modes button, .map-tools #atlas-region {
  min-height: 32px; padding: 4px 9px; border-radius: 2px; font: 500 .88em/1.3 var(--atlas-sans); color: var(--atlas-secondary);
}
.map-tools #atlas-region { border: 0; border-right: 1px solid var(--atlas-rule); border-radius: 0; background: transparent; }
.view-switch button.active { color: #fff; background: var(--atlas-ink); }
.map-tools .map-modes button.active { color: var(--atlas-ink); background: var(--atlas-tint); font-weight: 650; }
.map-legend, .map-controls button { color: var(--atlas-secondary); }
.map-legend { gap: 12px; padding: 6px 10px; }
.primary-button, .station-actions button, .preferences button, .route-choice, .view-line-map, .route-more-button { border-radius: 3px; }
.primary-button { justify-content: center; font-size: 1em; }
.preferences button.selected { border-color: #798a78; background: var(--atlas-tint); color: var(--atlas-ink); }
.route-choice.selected { border-color: #819180; background: #f1f4ee; box-shadow: inset 2px 0 #4d705a; }

/* Reading surfaces use the same type and rules as the region index. */
dialog, .station-card { border-radius: 5px; background: var(--atlas-page); }
.overlay-controls { background: var(--atlas-page); }
.overlay-controls .dialog-close, .overlay-controls .card-close, .sheet-close { color: var(--atlas-secondary); background: transparent; border-radius: 3px; }
.overlay-controls button:hover, .sheet-close:hover { background: var(--atlas-tint); }
.station-title h3, dialog h2, #line-profile-content .line-intro h3, .guide-card h3 { font-family: var(--atlas-serif); }
.station-card .station-kicker { color: var(--atlas-secondary); letter-spacing: .04em; }
.station-profile p, .line-intro p, .guide-card p { color: #37493e; }
.profile-station-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(8em,100%),1fr)); gap: 0 12px; }
.profile-station-grid button, .profile-line-grid button { min-height: 41px; padding: 5px 2px; border: 0; border-bottom: 1px solid var(--atlas-rule); border-radius: 0; background: none; color: var(--atlas-ink); text-align: start; overflow-wrap: anywhere; }
.profile-station-grid button:hover, .profile-line-grid button:hover { background: var(--atlas-tint); }
.osaka-directory-links button, .guide-station-link { border: 0; background: none; text-decoration: underline; text-underline-offset: .2em; color: #3f6451; }
.osaka-directory-links button { padding: 4px 0; margin-inline-end: 10px; }
.route-step h4 button, .route-end-title button { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

@media (max-width: 720px), (max-width: 950px) and (max-height: 500px) {
  .topbar { min-height: 52px; padding: 4px 12px; gap: 8px; }
  .atlas-heading { gap: 9px; }
  .atlas-title { font-size: 1.1em; padding-inline-start: 9px; }
  .topbar .brand { gap: 5px; font-size: .85em; }
  .brand img { width: 23px; height: 23px; }
  .header-right { gap: 4px; font-size: .83em; }
  .header-right .font-setting { padding-inline-start: 3px; }
  .topbar select { max-width: none; min-height: 40px; padding: 3px 0; }
  .sidebar .sidebar-tabs { gap: 22px; padding-top: 0; }
  .sidebar .sidebar-tabs button { padding: 6px 1px; }
  .map-top { inset: 12px 12px auto; }
  .map-tools { flex-flow: column nowrap; align-items: flex-end; gap: 4px; width: 100%; min-width: 0; }
  .map-tools .map-modes { max-width: 100%; }
  .map-tools #atlas-region { flex: 0 1 auto; min-width: 0; }
  .map-tools .map-modes button { min-width: 0; }
  .view-switch button, .map-tools .map-modes button, .map-tools #atlas-region { min-height: 32px; padding: 4px 7px; }
  .map-legend { display: none; }
  .map-bottom { bottom: 6px; left: 12px; right: auto; }
  .map-bottom #view-hint, .map-bottom #zoom-label { display: none; }
  .map-attribution { bottom: 6px; right: 12px; max-width: calc(100% - 82px); text-align: end; }
  .mobile-panel { top: auto; bottom: 54px; left: 12px; max-width: calc(100% - 80px); min-height: 44px; font-size: .92em; }
  #sidebar.mobile-peek ~ .map-section .mobile-panel { bottom: calc(var(--map-sheet-cover) + 48px); }
  .sidebar .panel .operator-filters button { min-height: 36px; }
}
@media (max-width: 520px) {
  .atlas-title { font-size: 1em; }
  .atlas-heading { gap: 6px; }
  .atlas-heading .brand { flex-shrink: 1; line-height: 1.22; }
  .brand img { flex: none; }
}
@media (max-width: 520px) {
  html .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  html .atlas-heading { display: contents; }
  html .topbar .edition-menu { grid-area: 1 / 1; justify-self: start; }
  html .header-right { grid-area: 1 / 2; }
  html .atlas-title { grid-area: 2 / 1 / auto / -1; padding: 0 0 5px; border: 0; font-size: 1.18em; }
}
@media (max-width: 410px) {
  html:lang(en) .topbar { grid-template-columns: auto minmax(0, 1fr); }
  html:lang(en) .topbar .brand { max-width: 7em; }
  html:lang(en) .atlas-title { grid-area: 1 / 2; justify-self: end; font-size: 1em; text-align: end; overflow-wrap: anywhere; }
  html:lang(en) .header-right { grid-area: 2 / 1 / auto / -1; justify-self: end; }
}
@media (forced-colors: active) {
  .operator-filters [aria-pressed=true], .view-switch [aria-pressed=true], .line-row.selected { outline: 2px solid Highlight; outline-offset: -2px; }
}