/* The site's frame (src/ui/site-shell.js): sections left, the bureau and the
   account in the middle, map state right, tools along the bottom centre.
   Only overrides — main.css stays the map-local one. */

/* ---- the top bar ---------------------------------------------------------- */

.top-status.is-site {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
}
.strategy-shell.has-long-brand .top-status.is-site {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-self: start;
}
.top-nav .observer-launcher { flex: none; }

.top-status.is-site .brand--center {
  justify-self: center;
  gap: 12px;
}
.brand--center .brand-copy { justify-items: center; text-align: center; }
/* The placeholder square before the name: the name is the logo (owner). */
.top-status.is-site .brand-mark { display: none; }
.brand--center .brand-sub { letter-spacing: 0.24em; }
.brand-account { display: flex; align-items: center; }
/* The header lets clicks through to the map (pointer-events: none on the bar,
   auto on its controls). The account chip is a control: it must take them.
   The middle also sits above its neighbours, so a crowded bar never covers it. */
/* Above the desk tabs and side docks, so the account menu opens over them;
   below the windows and dialogs. */
.top-status.is-site .brand--center { position: relative; z-index: 45; }
.top-status.is-site .brand-account { pointer-events: auto; }
.brand-account .account-wrap { margin: 0; }

.top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  justify-self: end;
}
.top-status.is-site .status-strip { flex: none; gap: 0; }
.top-status.is-site .status-strip > span:not(.status-keep) { display: none; }
.top-status.is-site .clock-readout { justify-self: auto; white-space: nowrap; }

/* Terrain / Intel: a small switch, not a dock. */
.top-right .mode-dock {
  position: static;
  transform: none;
  gap: 2px;
  padding: 2px;
  background: rgba(120, 184, 255, 0.05);
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-radius: 6px;
  box-shadow: none;
}
.top-right .mode-button {
  min-width: 0;
  height: 22px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.top-right .intel-grid-pick {
  position: static;
  transform: none;
}

/* ---- the dock, bottom centre: Map · Mark · Sim · Share -------------------------- */
/* One glass strip (site-shell.js). Each group is a caption over a row of bare
   glyphs — the map's own glyph language (no plates, a glow on hover, blue when
   on), which the tools speak now too. */
.strategy-shell.is-site .map-action-dock.is-unified {
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 5px 4px 3px;
  background: linear-gradient(180deg, rgba(14, 24, 40, 0.8), rgba(8, 14, 24, 0.84));
  border: 1px solid rgba(90, 150, 220, 0.22);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}
/* What else sits over this strip of map (the front-arrow day scrubber) centres
   on the dock, not on where the glyphs used to be. */
.strategy-shell.is-site { --map-action-center-x: 50% !important; }
.dock-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
}
.dock-group + .dock-group { border-left: 1px solid rgba(90, 150, 220, 0.16); }
.dock-cap {
  padding-top: 1px;
  color: rgba(150, 180, 214, 0.55);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}
.dock-row { display: flex; align-items: center; gap: 2px; }
/* A glyph's hover flyout clears the caption above its row, not just the glyph. */
.dock-row > * > [class*="-flyout"]:not([class*="-flyout-"]) { margin-bottom: 14px; }
/* Keep the same clearance when the pencil glyph shrinks on narrow screens. */
.dock-row > * > .pencil-flyout { bottom: calc(100% + 10px); }
/* Keep the caption and the visual gap in the flyout's hover area. Otherwise
   crossing the dock background makes its arbiter dismiss the menu before the
   pointer can reach it. Hidden flyouts inherit pointer-events: none here too. */
.dock-row > * > [class*="-flyout"]:not([class*="-flyout-"])::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px; /* the 10px glyph clearance plus the 14px caption clearance */
}
/* Bridge the caption below the day strip without covering its controls. */
.dock-row > * > .arw-flyout::after { top: calc(100% + var(--arw-days-h, 0px)); }
.dock-row .spot-hud-main,
.dock-row .tactical-tools-launcher { width: 36px; height: 36px; }
.dock-row > .observer-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  min-width: 36px;
  padding: 0 6px;
  color: rgba(176, 202, 232, 0.7);
  background: none;
  border: 0;
  border-radius: 8px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
  transition: color 0.16s ease, filter 0.16s ease, transform 0.1s ease;
}
.dock-row > .observer-launcher svg { width: 21px; height: 21px; flex: none; }
.dock-row > .observer-launcher:hover {
  color: #eaf4ff;
  background: none;
  filter: drop-shadow(0 0 7px rgba(61, 139, 255, 0.75));
}
.dock-row > .observer-launcher:active { transform: scale(0.92); }
.dock-row > .observer-launcher.active,
.dock-row > .observer-launcher.is-active,
.dock-row > .observer-launcher.is-live,
.dock-row > .observer-launcher[aria-pressed="true"],
.dock-row > .observer-launcher[aria-expanded="true"] {
  color: #74b4ff;
  background: none;
  filter: drop-shadow(0 0 9px rgba(61, 139, 255, 0.9));
}
.dock-row > .fate-launcher {
  width: auto;
  height: 24px;
  margin: 0 4px;
  padding: 0 9px;
  border-radius: 6px;
  box-shadow: none;
  z-index: auto;
}

/* Panels the tools open now rise from the bottom dock instead of hanging
   off the top-right corner. */
.strategy-shell.is-site ~ .sync-panel,
body:has(.strategy-shell.is-site) .sync-panel {
  top: auto;
  right: auto;
  bottom: 80px;
  left: calc(50% - 134px);
  max-height: calc(100vh - 150px);
  overflow: auto;
}
.strategy-shell.is-site .weather-dock {
  top: auto;
  right: auto;
  bottom: 80px;
  left: calc(50% - 126px);
  max-height: calc(100vh - 160px);
  transform-origin: bottom center;
}
.strategy-shell.is-site .fate-popover {
  right: auto;
  left: calc(50% - 165px);
  width: 330px;
  min-width: 0;
  bottom: 80px;
}
/* The draw toolbar already sits above a bottom dock — it keeps its place. */

/* ---- the zone store button ------------------------------------------------------ */

.store-launcher { display: inline-flex; align-items: center; gap: 6px; }
.store-launcher svg { width: 15px; height: 15px; flex: none; }

/* ---- the Mapmaker (src/ui/mapmaker.js) on the site ---------------------------------- */
/* What steps aside on the site as well (main.css has the rest): the Sim group. */
body.is-mapmaker .dock-group[data-group="sim"] { display: none !important; }
/* A locked tool's number gives its corner to the padlock (auth/gates.js). */
body.lacks-zones-draw .mm-tool[data-tool="area"] kbd,
body.lacks-zones-draw .mm-tool[data-tool="line"] kbd,
body.lacks-map-comment .mm-tool[data-tool="pin"] kbd,
body.lacks-map-draw .mm-tool[data-tool="pen"] kbd { visibility: hidden; }
.observer-icon { width: 14px; height: 14px; flex: none; }
#observer-launcher { display: inline-flex; align-items: center; gap: 6px; }

/* The old hint spoke of a bottom dock that switched map modes. */
.strategy-shell.is-site .map-hint { display: none; }

/* ---- narrower screens --------------------------------------------------------------- */

/* Medium widths: sections show icons only, the clock steps aside. */
@media (max-width: 1366px) {
  .top-nav .observer-launcher { font-size: 0; gap: 0; padding-left: 9px; padding-right: 9px; }
  .top-nav .observer-launcher svg { margin: 0; }
  .brand--center .brand-main { max-width: 34vw; }
}
@media (max-width: 1180px) {
  .top-status.is-site .clock-readout { display: none; }
}

/* Narrower: smaller glyphs; narrow: no captions. */
@media (max-width: 1180px) {
  .dock-group { padding: 0 3px; }
  .dock-row .spot-hud-main,
  .dock-row .tactical-tools-launcher,
  .dock-row > .observer-launcher { width: 32px; min-width: 32px; height: 32px; }
  .dock-row > .swarm-launcher { width: auto; }
}
@media (max-width: 920px) {
  .top-status.is-site { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .top-nav .observer-launcher { font-size: 0; gap: 0; }
  .top-nav .observer-launcher svg { margin: 0; }
  .brand--center .brand-copy { display: none; }
  .top-right .mode-dock { display: none; }
  .dock-cap { display: none; }
  .strategy-shell.is-site .map-action-dock.is-unified { bottom: 8px !important; padding: 3px 2px; }
}

/* The BOIDS switch in the Sim group: off by default on the site. */
.swarm-launcher { display: inline-flex; align-items: center; gap: 6px; }
.swarm-launcher svg { width: 16px; height: 16px; flex: none; }
.swarm-state { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(168, 190, 216, 0.75); }
.swarm-launcher.is-live { color: #eaf4ff; border-color: rgba(122, 229, 130, 0.55); box-shadow: 0 0 12px rgba(122, 229, 130, 0.2); }
.swarm-launcher.is-live .swarm-state { color: #9fe8a5; }

/* ---- the account at the right edge ------------------------------------------------ */
/* The bar lets clicks through to the map; the chip takes them, and its menu
   opens over the desk tabs and side docks. */
.top-right .brand-account { position: relative; z-index: 45; pointer-events: auto; }

/* ---- no menus: a visitor with no account, or anyone's choice (site-visibility.js) -- */

body.ui-guest-view .strategy-shell > *,
body.ui-menus-hidden .strategy-shell > *,
body.ui-guest-view .draw-toolbar,
body.ui-menus-hidden .draw-toolbar,
body.ui-guest-view .sync-panel,
body.ui-menus-hidden .sync-panel,
body.ui-guest-view .plaque-chip { display: none !important; }

/* The eye that hides them: top right, beside the account, dressed like it. */
.menus-hide-launcher {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -5px;                 /* a pair with the account chip */
  padding: 0;
  color: rgba(176, 202, 232, 0.78);
  background: rgba(120, 184, 255, 0.07);
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 6px;
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.menus-hide-launcher:hover { color: #eaf4ff; background: rgba(120, 184, 255, 0.16); border-color: rgba(120, 184, 255, 0.4); }
.menus-hide-launcher svg { width: 16px; height: 16px; }

/* The way back: a small tab in the top-right corner that fades once seen. */
.menus-show {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 8400;
  display: none;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 9px;
  color: #dcebfb;
  background: rgba(10, 16, 27, 0.78);
  border: 1px solid rgba(120, 184, 255, 0.3);
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 700 10px/1 "Segoe UI", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 400ms ease;
}
.menus-show svg { width: 15px; height: 15px; }
.menus-show kbd {
  padding: 2px 5px;
  color: rgba(200, 220, 242, 0.75);
  border: 1px solid rgba(120, 184, 255, 0.3);
  border-radius: 4px;
  font: 700 9px/1 ui-monospace, Consolas, monospace;
}
.menus-show.is-faded { opacity: 0.22; }
.menus-show:hover,
.menus-show:focus-visible { opacity: 1; }
body.ui-menus-hidden .menus-show { display: inline-flex; }

/* The guest's one button: Sign in, bottom centre, pulsing. */
.guest-signin {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 8400;
  display: none;
  align-items: center;
  height: 46px;
  padding: 0 34px;
  color: #f2f8ff;
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.62), rgba(31, 92, 196, 0.5));
  border: 1px solid rgba(150, 200, 255, 0.85);
  border-radius: 999px;
  font: 700 12.5px/1 "Bahnschrift", "Segoe UI", sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
  animation: guest-signin-pulse 1.7s ease-in-out infinite;
}
.guest-signin:hover { animation-play-state: paused; background: linear-gradient(180deg, rgba(86, 160, 255, 0.78), rgba(40, 110, 220, 0.62)); }
body.ui-guest-ready .guest-signin { display: inline-flex; }
@keyframes guest-signin-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(86, 160, 255, 0.55), 0 0 18px rgba(61, 139, 255, 0.35); }
  50% { opacity: 0.72; box-shadow: 0 0 0 12px rgba(86, 160, 255, 0), 0 0 36px rgba(110, 176, 255, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .guest-signin { animation: none; box-shadow: 0 0 22px rgba(61, 139, 255, 0.5); }
}

/* ---- "the map is loading" (site-loading.js) --------------------------------------- */

.site-loading {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 8300;
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  grid-template-rows: auto 3px;
  align-items: center;
  column-gap: 10px;
  row-gap: 7px;
  max-width: calc(100vw - 32px);
  padding: 9px 14px 8px;
  color: #e4effb;
  background: rgba(8, 13, 22, 0.82);
  border: 1px solid rgba(120, 184, 255, 0.28);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 600 12px/1.2 "Segoe UI", sans-serif;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.site-loading.is-on { opacity: 1; transform: translate(-50%, 0); }
.site-loading-ring {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(120, 184, 255, 0.25);
  border-top-color: #8cc4ff;
  border-radius: 50%;
  animation: site-loading-spin 0.9s linear infinite;
}
.site-loading.is-done .site-loading-ring { border-color: #7ae582; animation: none; }
.site-loading-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-loading-pct { color: #8cc4ff; font-variant-numeric: tabular-nums; }
.site-loading-bar {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background: rgba(120, 184, 255, 0.14);
  border-radius: 3px;
}
.site-loading-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d8bff, #8cc4ff);
  transform-origin: left center;
  transform: scaleX(0.04);
  transition: transform 300ms ease;
}
.site-loading.is-done .site-loading-bar i { background: #7ae582; }
.site-loading.is-unsure .site-loading-bar i { width: 34%; transform: none; animation: site-loading-slide 1.3s ease-in-out infinite; }
@keyframes site-loading-slide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
@keyframes site-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .site-loading-ring { animation: none; } }