/* Archive pickers: seismograph (graph_date_menubar.inc) and the NOAA
 * report pages (monthly_reports_menubar.inc, yearly_reports_menubar.inc).
 * Copyright (C) John Kline 2026
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 *
 * One row (7.10 grammar): prev stepper, the control(s) naming the archive
 * slot (date input + UTC toggle on the seismograph, popup-trigger button
 * on the reports), next stepper, Latest — steppers hug what they step.
 * Steppers are SlateGray rounded-square buttons: ring and chevron dark when
 * clickable, both Silver when disabled, #367ba3 only while pressed (and on
 * hover, but hover styling is gated to hover-capable devices — on touch
 * screens :hover sticks to the last thing tapped).  The report pages'
 * trigger opens a .gdp-pop panel: a 12-month grid under a ‹ year › header
 * (monthly) or an all-years grid (yearly); out-of-archive cells gray out.
 * The toggle/Latest mirror the .tidenav/.celnav grammar (#5A6673 bar,
 * Silver border, SlateGray active).  .sp on the container selects the
 * smartphone geometry.  (Design: bambi5t mockups/monthyear-picker.)
 */

.gdp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: Arial, sans-serif;
}
.gdp button {
  font-family: inherit;
  margin: 0;
}

/* Steppers.  Base .gdp-step is the bare chevron glyph, sized for the
 * popup header's year steppers; .box wraps it in the rounded-square
 * ring for the main row. */
.gdp-step {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.gdp-step span {
  border: solid SlateGray;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}
.gdp-prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.gdp-next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.gdp-step:disabled { cursor: default; }
.gdp-step:disabled span { border-color: Silver; }

.gdp-step.box {
  border: 2px solid SlateGray;
  border-radius: 6px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0;
}
.gdp-step.box span {
  border-width: 0 3px 3px 0;
  padding: 5px;
}
.gdp-prev.box span { position: relative; left: 2px; }
.gdp-next.box span { position: relative; left: -2px; }
.gdp-step.box:disabled { border-color: Silver; }

/* Press/hover cues.  :active is the touch-safe click cue: blue only
 * while the finger/button is down. */
.gdp-step:active:not(:disabled) span { border-color: #367ba3; }
.gdp-step.box:active:not(:disabled) { border-color: #367ba3; }
@media (hover: hover) {
  .gdp-step:hover:not(:disabled) span { border-color: #367ba3; }
  .gdp-step.box:hover:not(:disabled) { border-color: #367ba3; }
}

/* Native date input (seismograph) */
.gdp-date {
  font-family: inherit;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: 3px solid Silver;
  padding: 8px 10px;
}
.gdp-date:focus-visible {
  border-color: #367ba3;
  outline: none;
}
@media (hover: hover) {
  .gdp-date:hover { border-color: #367ba3; }
}

/* Popup trigger (reports pages).  .mo pins the monthly width so the row
 * never shifts as the selection changes ("Jul 2026": 3-char month + year). */
.gdp-pop-anchor { position: relative; display: inline-block; }
.gdp-pick {
  font-family: inherit;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: 3px solid Silver;
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
}
.gdp-pick.mo { min-width: 5.9em; }
.gdp-pick::after {
  content: '';
  display: inline-block;
  margin-left: 9px;
  vertical-align: 2px;
  border: solid SlateGray;
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.gdp-pick.open, .gdp-pick:focus-visible {
  border-color: #367ba3;
  outline: none;
}
@media (hover: hover) {
  .gdp-pick:hover { border-color: #367ba3; }
}

/* The popup panel */
.gdp-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 3px solid Silver;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  padding: 10px;
  z-index: 10;
  display: none;
}
.gdp-pop.open { display: block; }
.gdp-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gdp-pop-title {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}
.gdp-pop-head .gdp-step { padding: 4px 8px; }
.gdp-pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.gdp-pop-grid button {
  font-size: 16px;
  color: #333;
  background: none;
  border: none;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.gdp-pop-grid button.active {
  background-color: SlateGray;
  color: #fff;
}
.gdp-pop-grid button:disabled {
  color: Silver;
  cursor: default;
}
.gdp-pop-grid button:active:not(:disabled):not(.active) {
  background-color: #ddd;
}
@media (hover: hover) {
  .gdp-pop-grid button:hover:not(:disabled):not(.active) {
    background-color: #ddd;
  }
}

/* UTC-half segmented toggle (seismograph) */
.gdp-half {
  display: inline-flex;
  background-color: #5A6673;
  border: 3px solid Silver;
}
.gdp-half button {
  padding: 9px 16px;
  font-size: 17px;
  color: #f2f2f2;
  background: none;
  border: none;
  cursor: pointer;
}
.gdp-half button.active {
  background-color: SlateGray;
  color: #fff;
}
.gdp-half button:disabled {
  color: #8b95a0;
  cursor: default;
}
.gdp-half button:active:not(.active):not(:disabled) {
  background-color: #ddd;
  color: #000;
}
@media (hover: hover) {
  .gdp-half button:hover:not(.active):not(:disabled) {
    background-color: #ddd;
    color: #000;
  }
}

/* Latest button */
.gdp-latest {
  background-color: #5A6673;
  border: 3px solid Silver;
  color: #f2f2f2;
  padding: 9px 16px;
  font-size: 17px;
  cursor: pointer;
}
.gdp-latest:disabled {
  color: #8b95a0;
  cursor: default;
}
.gdp-latest:active:not(:disabled) {
  background-color: #ddd;
  color: #000;
}
@media (hover: hover) {
  .gdp-latest:hover:not(:disabled) {
    background-color: #ddd;
    color: #000;
  }
}

/* Backstop error line (browsers that degrade type=date to text) */
.gdp-error {
  text-align: center;
  font-size: 18px;
  color: red;
}

/* Smartphone geometry */
.gdp.sp { gap: 22px; }
.gdp.sp .gdp-date,
.gdp.sp .gdp-pick {
  font-size: 32px;
  padding: 12px 14px;
}
.gdp.sp .gdp-pick::after {
  border-width: 0 5px 5px 0;
  padding: 5px;
  margin-left: 14px;
  vertical-align: 4px;
}
.gdp.sp .gdp-half button,
.gdp.sp .gdp-latest {
  font-size: 32px;
  padding: 12px 22px;
}
.gdp.sp .gdp-step span {
  border-width: 0 7px 7px 0;
  padding: 7px;
}
.gdp.sp .gdp-step.box {
  width: 66px;
  height: 66px;
  border-width: 3px;
  border-radius: 9px;
}
.gdp.sp .gdp-step.box span {
  border-width: 0 5px 5px 0;
  padding: 8px;
}
.gdp.sp .gdp-prev.box span { left: 3px; }
.gdp.sp .gdp-next.box span { left: -3px; }
.gdp.sp .gdp-pop { padding: 14px; }
.gdp.sp .gdp-pop-title { font-size: 30px; }
.gdp.sp .gdp-pop-grid { gap: 6px; }
.gdp.sp .gdp-pop-grid button {
  font-size: 28px;
  padding: 14px 18px;
}
.gdp.sp + .gdp-error { font-size: 32px; }