/* The masthead is shared by the map, written pages and Journey Desk. Keep its
   geometry here: old page-specific flex rules shrank only the map's logo on
   laptops and gave articles a second inset inside the phone search field. */
.wrap > .site-header,
.site-header > .site-masthead,
.restored-map > .topline.command-bar {
  min-height: 87px;
  padding: 16px;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-solid);
}
.site-brand,
.restored-map .topline > .brand.pane { gap: 10px; }
.site-mark,
.restored-map .topline .brand-mark-inline { width: 30px; height: 34px; flex: none; }
.site-wordmark,
.restored-map .topline .brand-word { width: 124px; height: 26px; }
.site-search,
.restored-map .topline > .search,
.restored-map .topline > .cmd.pane {
  height: 54px;
  min-height: 54px;
  padding: 5px 5px 5px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-solid);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent),
              0 8px 24px color-mix(in srgb, var(--text) 8%, transparent);
}
.site-search input,
.restored-map .topline > .search input,
.restored-map .topline > .cmd.pane input { padding: 0; color: var(--text); font: 14px var(--sans); }
.site-search button,
.restored-map .topline > .search .site-search-submit,
.restored-map .topline > .cmd.pane .cmd-submit {
  min-width: 85px;
  height: 40px;
  min-height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-solid);
  font: 600 13px var(--sans);
}
.site-links a,
.site-links button,
.restored-map .top-pages a,
.restored-map .top-pages button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: 400 14px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-links button:hover, .site-links button:focus-visible { background: var(--bg-raised); color: var(--accent); }
.site-links button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The map already reports feed freshness on the map. Its older header status
   pushes every navigation link left of the same links on written pages. */
.restored-map .topline .status-dot { display: none; }
@media (min-width: 1001px) {
  /* Explicit tracks make a tab change to Archive keep the same search width.
     Its global field used to stretch while every list search stopped at 620px. */
  .wrap > .site-header,
  .site-header > .site-masthead,
  .restored-map > .topline.command-bar {
    display: grid;
    grid-template-columns: auto minmax(190px, 620px) minmax(0, 1fr) 72px;
  }
  .site-brand, .restored-map .topline > .brand.pane { grid-column: 1; grid-row: 1; }
  .site-search, .restored-map .topline > .search, .restored-map .topline > .cmd.pane {
    grid-column: 2; grid-row: 1; width: 100%; min-width: 0; max-width: none;
  }
  .site-links, .restored-map .topline > .cluster {
    grid-column: 3; grid-row: 1; width: 100%; min-width: 0; margin: 0;
  }
  .site-theme-toggle { grid-column: 4; grid-row: 1; }
}
@media (min-width: 1001px) and (max-width: 1350px) {
  /* On a laptop each page makes the same two rows. The switch stays in the
     brand/navigation row; search keeps the full second row. */
  .wrap > .site-header,
  .site-header > .site-masthead,
  .restored-map > .topline.command-bar { grid-template-columns: auto minmax(0, 1fr) 72px; }
  .site-links, .restored-map .topline > .cluster { grid-column: 2; }
  .site-theme-toggle { grid-column: 3; }
  .site-search, .restored-map .topline > .search, .restored-map .topline > .cmd.pane {
    grid-column: 1 / -1; grid-row: 2;
  }
}
@media (max-width: 1000px) {
  .wrap > .site-header,
  .site-header > .site-masthead,
  .restored-map > .topline.command-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 34px 56px 44px;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 10px;
  }
  .wrap > .site-header > .site-brand,
  .site-header > .site-masthead > .site-brand,
  .restored-map .topline > .brand.pane { grid-column: 1; grid-row: 1; gap: 19px; min-width: 0; }
  .wrap > .site-header > .site-search,
  .site-header > .site-masthead > .site-search,
  .restored-map .topline > .cmd.pane {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    height: 56px;
    min-height: 56px;
    margin: 0;
    padding: 6px 6px 6px 16px;
  }
  .wrap > .site-header > .site-links,
  .site-header > .site-masthead > .site-links,
  .restored-map .topline > .cluster {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wrap > .site-header > .site-theme-toggle,
  .site-header > .site-masthead > .site-theme-toggle,
  .restored-map .topline > .site-theme-toggle { grid-column: 2; grid-row: 1; }
  /* Keep the switch in its own track. Absolute positioning made the home
     link stretch underneath it while written-page branding stopped beside it. */
  .restored-map .topline > .site-theme-toggle {
    position: static;
    grid-column: 2;
    grid-row: 1;
  }
  .site-header > .site-masthead { padding-right: 10px; }
  .site-header > .site-masthead > .site-search,
  .site-header > .site-masthead > .site-links { width: 100%; }
  .site-search button,
  .restored-map .topline > .cmd.pane .cmd-submit {
    width: 85px;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }
  .site-search input,
  .restored-map .topline > .cmd.pane input { font-size: 16px; }
}

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 72px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-faint);
  cursor: pointer;
}
.site-theme-toggle .theme-glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.site-theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .site-theme-toggle .theme-sun,
:root[data-theme="dark"] .site-theme-toggle .theme-moon {
  background: var(--bg-solid);
  color: var(--accent);
}
.site-theme-toggle:hover .theme-glyph { transform: scale(1.06); }
.site-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .site-theme-toggle .theme-glyph { transition: none; }
}

/* Articles and Journey Desk had no Units window at all. Use an opaque,
   scrollable dialog there, unlike the map's glass boards, so long lists of
   time zones and radio labels stay readable over every background. */
.site-controls-dialog {
  width: min(840px, calc(100vw - 24px));
  max-width: none;
  max-height: min(92dvh, 900px);
  margin: auto;
  padding: 0 24px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-solid);
  color: var(--text);
  box-shadow: 0 22px 70px color-mix(in srgb, var(--text) 24%, transparent);
  overflow-y: auto;
  font: 15px/1.45 var(--sans);
}
.site-controls-dialog::backdrop { background: color-mix(in srgb, var(--text) 48%, transparent); }
.site-controls-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-solid);
}
.site-controls-head h2 { margin: 0; color: var(--text); font: 600 22px/1.2 var(--sans); }
.site-controls-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font: 24px/1 var(--sans);
  cursor: pointer;
}
.site-controls-close:hover { color: var(--accent); }
.site-controls-clocks { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.site-controls-clocks [data-site-extra-clocks] { flex: 1 0 100%; margin: 0; }
.site-controls-clock {
  flex: 1 1 170px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-panel);
}
.site-controls-clock strong { display: block; font: 600 22px/1.2 var(--mono); color: var(--accent); }
.site-controls-clock small { display: block; margin-top: 4px; color: var(--text-dim); font-size: 12px; }
.site-controls-clock-title { display: block; margin-bottom: 5px; color: var(--text-dim); font-size: 12px; }
.site-controls-clock button { float: right; border: 0; background: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.site-controls-add { display: flex; gap: 8px; margin-bottom: 4px; }
.site-controls-add input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
}
.site-controls-add button {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg-solid);
  font: 600 13px var(--sans);
  cursor: pointer;
}
.site-controls-add button:disabled { opacity: .5; cursor: default; }
.site-controls-help, .site-controls-error { margin: 4px 0 20px; color: var(--text-dim); font-size: 12px; }
.site-controls-error { color: var(--accent); min-height: 1em; }
.site-controls-dialog h3 { margin: 0 0 12px; font: 600 17px var(--sans); }
.site-controls-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site-controls-units fieldset {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-panel);
}
.site-controls-units legend { padding: 0 5px; color: var(--accent); font: 600 12px var(--sans); }
.site-controls-units label { display: flex; align-items: center; gap: 9px; min-height: 34px; font-size: 14px; cursor: pointer; }
.site-controls-units input { accent-color: var(--accent); }
.site-controls-note { margin: 16px 0 0; color: var(--text-dim); font-size: 12px; }
@media (max-width: 560px) {
  .site-controls-dialog { padding: 0 16px 18px; max-height: 90dvh; }
  .site-controls-units { grid-template-columns: 1fr; }
  .site-controls-clock { flex-basis: calc(50% - 10px); }
}