/* The period popup: a month, a year or a week picked whole, under the
 * button that names the period (scripts/period_popup.js).  One look for
 * every page that has one: the monthly and yearly reports' pickers and
 * the Solar Array page's History card.
 * Copyright (C) John Kline 2026
 * See LICENSE for your rights.
 *
 * The popup only.  The button that opens it is the page's own (the
 * reports' .gdp-pick in their stepper row, the History card's .sh-pick
 * beside its date box), and so is where the popup sits on a phone.
 *
 * Its parts: an optional < title > header whose arrows page through
 * years or months; then either a grid of cells (.pp-grid: months, years)
 * or a month's calendar whose ROWS are the buttons (.pp-weeks), Sunday
 * to Saturday, so a week running into the next month (or year) is the
 * last row of one month and the first of the next, the other month's
 * days in gray.  A cell off the record is disabled; the period on show
 * is .on.  COLORS COME FROM --tp-control-*; this file owns none. */
.pp-wrap { position: relative; display: inline-block; }
.pp {
  position: absolute;
  top: calc(100% + .375rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tp-control-face);
  border: .0625rem solid var(--tp-control-line);
  border-radius: .625rem;
  box-shadow: 0 .375rem 1.125rem rgba(0, 0, 0, 0.16);
  padding: .625rem;
  z-index: 10;
}
.pp[hidden] { display: none; }
.pp button { font-family: inherit; margin: 0; cursor: pointer; }
.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.pp-title {
  font-size: min(calc(1.0625rem + var(--tp-step)), max(1.0625rem, var(--tp-cap)));
  font-weight: bold;
  color: var(--tp-ink);
  white-space: nowrap;
}
/* The header's arrows: the site's small solid triangle (the reports'
   steppers draw the same), bare, and grayed and faded when there is no
   page further, as every disabled stepper on the site is. */
.pp-step {
  background: none;
  border: none;
  padding: .25rem .5rem;
  color: var(--tp-control-ink);
}
.pp-step svg { width: .8125rem; height: .8125rem; fill: currentColor; display: block; }
.pp-step:disabled { cursor: default; color: var(--tp-faint); opacity: .42; }
.pp-step:active:not(:disabled) { color: var(--tp-control-on); }

.pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.pp-grid button, .pp-weeks button {
  font-size: min(calc(1rem + var(--tp-step)), max(1rem, var(--tp-cap)));
  color: var(--tp-ink-2);
  background: none;
  border: none;
  border-radius: .375rem;
}
.pp-grid button { padding: .5625rem .75rem; white-space: nowrap; }
.pp-dow, .pp-row { display: grid; grid-template-columns: repeat(7, 2.3rem); }
.pp-dow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tp-muted);
  text-align: center;
  padding: 0 0 .25rem;
}
.pp-weeks { display: grid; gap: .125rem; }
/* the row's grid on a span inside the button, not on the button, which
   older browsers would not lay out as a grid */
.pp-weeks button { display: block; width: 100%; padding: .4rem 0; }
.pp-row span { text-align: center; font-variant-numeric: tabular-nums; }
.pp-row span.out { color: var(--tp-muted); }
.pp-row span.today { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pp-grid button.on, .pp-weeks button.on, .pp-weeks button.on span.out {
  background-color: var(--tp-control-on);
  color: var(--tp-control-on-ink);
}
.pp-grid button:disabled, .pp-weeks button:disabled {
  /* Grayed out the way Latest is: --tp-hair is the hairline tier, and a
     month in it read 1.15 in dark -- gone rather than gray. */
  color: var(--tp-faint);
  opacity: .55;
  cursor: default;
}
.pp-weeks button:disabled span.out { color: inherit; }
.pp-grid button:active:not(:disabled):not(.on),
.pp-weeks button:active:not(:disabled):not(.on) { background-color: var(--tp-control-hover); }
@media (hover: hover) {
  .pp-step:hover:not(:disabled) { color: var(--tp-control-on); }
  .pp-grid button:hover:not(:disabled):not(.on),
  .pp-weeks button:hover:not(:disabled):not(.on) { background-color: var(--tp-control-hover); }
}

/* Phone geometry, under the width query.  The cells touch, so no overlay
   can lend one room without taking it from the next: on a phone a cell
   IS 44 px tall, and so are the header's arrows and a week's row.  It is
   a popup; nothing on the page moves for it. */
@media (max-width: 600px){.pp.pp{ padding: .875rem; }}
@media (max-width: 600px){.pp.pp .pp-step{ min-width: 44px; min-height: 44px; }}
@media (max-width: 600px){.pp.pp .pp-step svg{ width: 1.875rem; height: 1.875rem; margin: auto; }}
@media (max-width: 600px){.pp.pp .pp-title{ font-size: max(11.5px, 1.875rem); }}
@media (max-width: 600px){.pp.pp .pp-grid{ gap: .375rem; }}
@media (max-width: 600px){.pp.pp .pp-grid button,
.pp.pp .pp-weeks button{
  min-height: 44px;
  font-size: max(var(--tp-phone-label), 1.75rem);
}}
@media (max-width: 600px){.pp.pp .pp-grid button{ min-width: 44px; padding: .875rem 1.125rem; }}
@media (max-width: 600px){.pp.pp .pp-dow{ font-size: max(var(--tp-phone-label), 1.25rem); }}
@media (max-width: 600px){.pp.pp .pp-dow,
.pp.pp .pp-row{ grid-template-columns: repeat(7, minmax(0, 1fr)); }}