/* =========================================================================
   soilKey Pro -- visual polish (v0.9.108)
   A soil-science palette (browns/terracotta/moss) layered on the bslib theme,
   plus card/navbar refinements, a pedon ribbon, and a soft busy-state spinner.
   Colours are kept in sync with the bs_theme() primary/secondary in app.R.
   ========================================================================= */

:root {
  --sk-brown:     #6B4423;   /* primary   -- topsoil */
  --sk-terra:     #A0522D;   /* secondary -- subsoil / accent */
  --sk-moss:      #4F772D;   /* success   -- vegetation */
  --sk-sand:      #EFE6DA;   /* light background wash */
  --sk-ink:       #2E2A26;   /* text */
}

/* ---- navbar wordmark ---------------------------------------------------- */
.navbar.navbar-expand-md .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.navbar-brand .sk-mark { color: var(--sk-terra); }

/* ---- the pedon ribbon (global status bar under the navbar) -------------- */
.sk-ribbon {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
  background: linear-gradient(90deg, var(--sk-sand), #fff);
  border-bottom: 1px solid rgba(107, 68, 35, 0.18);
  font-size: 0.875rem;
}
.sk-ribbon .sk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(107, 68, 35, 0.2);
  white-space: nowrap;
}
.sk-ribbon .sk-chip .sk-key { color: var(--sk-brown); font-weight: 600; }
/* v0.9.115 a11y: darker green / grey so ribbon text clears WCAG AA 4.5:1
   contrast on the sand/white ribbon (was --sk-moss #4F772D ~4.1:1 and
   #9a8c7d ~3.0:1 on white). */
.sk-ribbon .sk-built { color: #3f6024; font-weight: 600; }
.sk-ribbon .sk-empty { color: #6f6256; }

/* ---- cards: a touch of warmth + lift ----------------------------------- */
.card { border-color: rgba(107, 68, 35, 0.15); }
.card > .card-header {
  background: var(--sk-sand);
  border-bottom: 1px solid rgba(107, 68, 35, 0.15);
  font-weight: 600;
  color: var(--sk-ink);
}

/* ---- primary action buttons feel tactile ------------------------------- */
.btn-primary { transition: filter 0.12s ease, transform 0.12s ease; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }

/* ---- evidence badges keep their semantic colours but rounder ----------- */
.badge { border-radius: 999px; letter-spacing: 0.2px; }

/* ---- soft busy state: dim + spinner over any recalculating output ------ */
.recalculating, .shiny-output-error ~ .recalculating {
  position: relative;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.recalculating::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(107, 68, 35, 0.25);
  border-top-color: var(--sk-terra);
  border-radius: 50%;
  animation: sk-spin 0.7s linear infinite;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* ---- getting-started modal: a little breathing room -------------------- */
.sk-steps { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.sk-steps li { margin-bottom: 0.3rem; }

/* ---- v0.9.115 a11y: respect reduced-motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .recalculating::after { animation: none; }
  .btn-primary { transition: none; }
  .btn-primary:active { transform: none; }
}

/* a screen-reader-only utility (mirrors Bootstrap's .visually-hidden, in
   case the bslib build omits it) */
.sk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- v0.9.115 responsive: usable down to a phone (~375px) -------------- */
@media (max-width: 768px) {
  /* tall fixed-height visualisations shrink to the viewport */
  .leaflet-container,
  .plotly.html-widget,
  .shiny-plot-output > img,
  .shiny-image-output > img { max-height: 48vh !important; height: auto !important; }
  /* tighter cards + ribbon */
  .card > .card-body { padding: 0.75rem; }
  .sk-ribbon { gap: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.8rem; }
  /* result cards stack instead of squeezing three-up */
  .bslib-column-wrap { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .leaflet-container,
  .plotly.html-widget { max-height: 40vh !important; }
  .sk-ribbon { flex-direction: column; align-items: flex-start; }
  .navbar-brand-inner { font-size: 1rem; }
}
