/*
 * Grokmos phone fit. Loaded after atlas.css by src/features/grokmos/serve.ts.
 * Kept outside public/grokmos so a new Atlas build does not overwrite it.
 */

/* The "not affiliated" line is a real footer under the map, not an overlay on top of it. */
footer.gk-disclaimer {
  position: static;
  display: block;
  max-width: none;
  margin: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  text-align: center;
  white-space: normal;
  overflow: visible;
  pointer-events: auto;
  font-size: 11px;
  line-height: 1.4;
}

/* An empty placeholder slot is never shown in the tool row. */
#atlas-cockpit .hud-hint > .gk-mini-slot {
  display: none;
}

/* Back and Forward always show (0020): disabled keeps the frame, atlas.css dims only the arrow. */
:root:not([data-atlas-hud-size="large"]) #atlas-cockpit .atlas-hud {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
}

@media (max-width: 420px) {
  /* The wordmark already says Grokmos, so the small kicker goes and the title can wrap. */
  .atlas-header .hud-heading small {
    display: none;
  }
  .atlas-header .hud-heading h1 {
    margin: 0;
    font-size: 15px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Every tool fits in one row: buttons share the width instead of a fixed 40px each. */
  :root:not([data-atlas-hud-size="large"]) #atlas-cockpit .hud-hint.hud-hint {
    gap: 3px;
    padding: 0 2px 14px;
    justify-content: space-between;
    overflow-x: visible;
    scrollbar-width: none;
  }
  :root:not([data-atlas-hud-size="large"]) #atlas-cockpit .hud-hint::-webkit-scrollbar {
    display: none;
  }
  :root:not([data-atlas-hud-size="large"]) #atlas-cockpit .hud-hint > .hud-line-toggle.hud-line-toggle {
    flex: 1 1 0;
    width: auto;
    min-width: 30px;
    max-width: 44px;
    height: 36px;
    min-height: 36px;
  }
  :root:not([data-atlas-hud-size="large"]) #atlas-cockpit .hud-hint > .gk-help-icon.gk-help-icon {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
  }
}