/*
 * controls.css: buttons on the map (toolbar) and in the panel (language switch).
 *
 * Two shapes only:
 *   .segmented   a small group of buttons where one is "on" (3D / Top down, EN / RO)
 *   .control     any single button; add .control--solid to make it stand alone
 * A button is "on" when it has aria-pressed="true". The script sets this, so styling
 * that attribute keeps the look and the accessibility state in sync.
 */

.toolbar {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: calc(100% - var(--sheet-width) - 3 * var(--edge));
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-control) + 3px);
  box-shadow: var(--shadow-control);
}
/* Inside the panel the language switch doesn't need a shadow. */
.segmented--small { box-shadow: none; }

.control {
  display: inline-flex;          /* also makes <a class="control"> line up exactly like a <button> */
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  color: inherit;                /* links would otherwise be blue and underlined */
  text-decoration: none;
  border-radius: var(--radius-control);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.control:hover { background: var(--sheet-sunk); }
.control[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }

.segmented--small .control { min-height: 1.75rem; padding: 0 var(--space-2); font-size: var(--text-xs); }

.control--solid {
  padding: 0 var(--space-4);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-control) + 3px);
  box-shadow: var(--shadow-control);
}
.control--solid:hover { background: var(--sheet-sunk); }
.control--solid[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }

/* The one loud button ("Generate presentation"): survey-flag pink. */
.control--flag, .control--flag:hover { color: var(--label-accent-text); border-color: var(--flag); }
.control--flag { background: var(--flag); }
.control--flag:hover { background: var(--label-accent-bg); }

/* Bigger touch targets on phones and tablets. */
@media (pointer: coarse) {
  .control { min-height: 2.75rem; }
  .segmented--small .control { min-height: 2.25rem; }
}

/* On phones the panel is below the map, so the toolbar can use the full width. */
@media (max-width: 47.5rem) {
  .toolbar { left: var(--edge); max-width: none; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ Preview banner (unapproved plot) */

.preview-banner {
  position: absolute;
  top: var(--edge);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  background: var(--warn);
  color: var(--sheet);
  border-radius: 999px;
  box-shadow: var(--shadow-control);
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: center;
  pointer-events: none;
}

/* ------------------------------------------------------------------ Loading and error messages */

.status {
  position: absolute;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  max-width: min(28rem, calc(100% - 2 * var(--edge)));
  padding: var(--space-2) var(--space-4);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-control);
  font-size: var(--text-sm);
  font-weight: 550;
  text-align: center;
  pointer-events: none;
}

/* Errors need to be impossible to miss, so they move to the middle and get room to breathe. */
.status[data-kind="error"] {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sheet);
  border-color: var(--warn);
  color: var(--warn);
  font-size: var(--text-base);
  pointer-events: auto;
}