[x-cloak] { display: none !important; }

body { background: #f5f6f8; }

/* country flags come from the API territory strings. The polyfill (index/situation/admin)
   injects the "Twemoji Country Flags" @font-face; it only takes effect if that font leads the
   stack. It carries flag glyphs only, so every other character falls through to Bootstrap's
   defaults — safe to set globally. Value = Bootstrap 5.3 --bs-font-sans-serif with the flag
   font prepended. */
:root {
  --bs-font-sans-serif: "Twemoji Country Flags", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 22rem; max-width: 92vw; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  z-index: 1050;
  overflow-y: auto;
}
.modal-card { width: 32rem; max-width: 96vw; }
.modal-card-wide { width: 44rem; }

.location-block { background: #eef4ff; border-radius: .5rem; padding: .75rem; }
.location-image { max-height: 320px; }

.radio-map { height: 240px; }

.collapse-toggle { font-size: 1rem; line-height: 1; min-width: 2.2rem; font-weight: 700; }

.player-checklist { max-height: 7rem; overflow-y: auto; }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* a small arrow that points "up" = north at 0°, rotated to the bearing */
.bearing-arrow { vertical-align: -2px; color: #0d6efd; }

/* bearing tick labels on the map tool's range circles */
.tick-label {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  background: none;
  border: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
  pointer-events: none;
}
.tick-label-card { font-size: 11px; font-weight: 700; }

pre { white-space: pre-wrap; word-break: break-word; }

/* seed-recovery: fixed-size dev-pair scroll buttons on the Candidates header */
.seed-navbtn { width: 2.1rem; text-align: center; }

/* seed-recovery: highlight the observation row whose deviation is shown in the candidates
   table. A left accent (not a full grey fill) so it never clashes with the greyed-out
   disabled inputs on a blank observation. */
.obs-active > td { box-shadow: inset 3px 0 0 0 #0d6efd; background-color: rgba(13, 110, 253, .06); }

/* documentation pages (tutorial, wiki): a sticky contents sidebar beside a readable column */
.doc-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.doc-sidebar .nav-link { padding: .12rem .5rem; font-size: .88rem; color: #495057; border-left: 2px solid transparent; }
.doc-sidebar .nav-link:hover { color: #0d6efd; }
.doc-content { max-width: 54rem; }
.doc-content section { scroll-margin-top: 1rem; }
.doc-content section > h2 { margin-top: 2.25rem; padding-top: .25rem; border-top: 1px solid #e9ecef; }
.doc-content section:first-of-type > h2 { border-top: none; margin-top: .5rem; }
.doc-content h3 { margin-top: 1.4rem; font-size: 1.08rem; }
.doc-content table { font-size: .92rem; }
.doc-lead { font-size: 1.08rem; color: #343a40; }
.doc-content .callout { border-left: 4px solid #0d6efd; background: #eef4ff; border-radius: .35rem; padding: .6rem .85rem; margin: 1rem 0; }
.doc-content .callout.warn { border-left-color: #fd7e14; background: #fff6ee; }
.doc-content .callout .callout-title { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: #0d6efd; }
.doc-content .callout.warn .callout-title { color: #fd7e14; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #0d6efd; color: #fff; font-weight: 700; font-size: .85rem; margin-right: .4rem; }