/* Copyright 2026 by John A Kline.  See LICENSE for your rights.
   The Solar Array page: a production card in the home page's grammar,
   then the array drawn panel by panel.  Everything else is tempestas.css.

   THE RAMP is five stops, navy at nothing to gold at a panel's 400 W.
   scripts/solar_array.js reads them from here to color each panel, and
   the legend and the scale bar draw them straight, so the three can
   never disagree.  Figures on a panel sit on a chip of the card's own
   ground: from 44% to 73% along the ramp, 176 to 292 W, neither white
   nor black passes both WCAG 4.5 and APCA Lc 60 (tools/contrast.py). */

:root {
  --sa-ramp-0:#1e2b4f;
  --sa-ramp-1:#265f82;
  --sa-ramp-2:#2a8f84;
  --sa-ramp-3:#86c35a;
  --sa-ramp-4:#f4d03f;
  --sa-ramp:linear-gradient(to right, var(--sa-ramp-0), var(--sa-ramp-1),
            var(--sa-ramp-2), var(--sa-ramp-3), var(--sa-ramp-4));
  --sa-miss:#c9ced4;
  --sa-miss-2:#b3b9c0;
  --sa-frame:#5a6673;
}
.theme-dark {
  --sa-miss:#2a3358;
  --sa-miss-2:#1b2340;
  --sa-frame:#6a76a7;
}

.sa { max-width: 77.5rem; width: calc(100% - 2.5rem); margin: 0 auto;
      padding: .5rem 0 1.5rem; box-sizing: border-box;
      font-family: 'Open Sans', arial, sans-serif;
      font-variant-numeric: tabular-nums; color: var(--tp-ink); }
.sa > .pghead { margin-bottom: 1.625rem; }
.sa [hidden] { display: none !important; }
.sa-back { margin: 0 0 .5rem; font-size: .9rem; }
.sa-back a { color: var(--tp-link); text-decoration: none; }
.sa-back a:hover { text-decoration: underline; }

.sa-card { background: var(--tp-surface); border: .0625rem solid var(--tp-line);
           padding: 16px 18px; box-sizing: border-box; min-width: 0; }
.sa-card + .sa-card { margin-top: 18px; }
.sa-eyebrow { margin: 0 0 12px; color: var(--tp-accent); font-weight: 600;
              font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
              display: flex; align-items: center; gap: .5em; }

/* ---- the production card: now, today, and the panels ---------------- */
.sa-cond { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.sa-cond > div { padding: 0 20px; border-left: .0625rem solid var(--tp-hair); min-width: 0; }
.sa-cond > div:first-child { padding-left: 0; border-left: 0; }
.sa-big { font-size: 4.2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.sa-big small, .sa-v small { font-size: .45em; font-weight: 500; color: var(--tp-muted); }
.sa-k { font-size: .75rem; font-weight: 600; letter-spacing: .08em;
        text-transform: uppercase; color: var(--tp-accent); }
.sa-v { font-size: 2.6rem; font-weight: 700; line-height: 1.15; }
.sa-s { font-size: .85rem; color: var(--tp-muted); margin: 0; }

/* The scale runs from nothing to the inverters' limit, so the marker's
   place on it is the share of the limit the sentence under it states. */
.sa-scale { position: relative; margin: 10px 0 4px; height: 8px;
            border-radius: 4px; background: var(--sa-ramp); }
.sa-scale .mk { position: absolute; top: 10px; width: 0; height: 0;
  transform: translateX(-6px);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid var(--tp-ink); }
.sa-ticks { position: relative; height: 1.4em; margin: 14px 0 6px;
            font-size: .72rem; color: var(--tp-muted); }
.sa-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sa-ticks span:first-child { transform: none; }
.sa-ticks span:last-child { transform: translateX(-100%); }

.sa-kv { display: grid; grid-template-columns: 1fr auto; margin: 0; font-size: .9rem; }
.sa-kv > * { padding: 7px 0; border-bottom: .0625rem solid var(--tp-hair); }
.sa-kv > :nth-last-child(-n+2) { border-bottom: 0; }
.sa-kv dt { color: var(--tp-ink-2); }
.sa-kv dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; padding-left: 1em; }

/* ---- the array ---------------------------------------------------------
   Thirteen columns: AR6 and AR7's four, a narrow aisle, AR1's eight.  An
   array is a label row over a panel row, three such rows (on a phone,
   eight columns and four rows; see the end).  The drawing is
   a container, so the panels, not the screen, decide what they can hold. */
.sa-seg { display: inline-flex; border: .0625rem solid var(--tp-control-line);
          border-radius: var(--tp-control-r); overflow: hidden; margin-left: auto;
          text-transform: none; letter-spacing: 0; }
.sa-seg button { font: inherit; font-size: .8rem; font-weight: 600; padding: .3em .9em;
                 border: 0; background: var(--tp-control-face); color: var(--tp-control-ink);
                 cursor: pointer; }
.sa-seg button + button { border-left: .0625rem solid var(--tp-control-line); }
.sa-seg button:hover { background: var(--tp-control-hover); }
.sa-seg button[aria-pressed="true"] { background: var(--tp-control-on);
                                      color: var(--tp-control-on-ink); }

.sa-roof { container-type: inline-size; }
.sa-roofgrid { display: grid; gap: 4px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .6fr) repeat(8, minmax(0, 1fr)); }
/* scripts/solar_array.js places each piece: --c and --r here, --pc and
   --pr on a phone, --n the columns a label spans. */
.sa-lab, .sa-p { grid-column: var(--c) / span var(--n); grid-row: var(--r); }
.sa-lab { font-size: .75rem; color: var(--tp-muted); letter-spacing: .04em;
          align-self: end; padding-top: 10px; white-space: nowrap; }
.sa-lab b { color: var(--tp-ink-2); font-weight: 600; }
.sa-lab[data-row="0"] { padding-top: 0; }
.sa-p { aspect-ratio: 8 / 11; border: 2px solid var(--sa-frame); border-radius: 4px;
        box-sizing: border-box; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        cursor: pointer; min-width: 0; overflow: hidden; padding: 0;
        font: inherit; color: var(--tp-ink);
        background-image:
          linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 25% 16.66%; transition: background-color .5s ease; }
.sa-p:focus-visible, .sa-p.sel { outline: 3px solid var(--tp-accent); outline-offset: 2px; }
.sa-p.miss { background-color: var(--sa-miss);
  background-image: repeating-linear-gradient(45deg, var(--sa-miss) 0 6px, var(--sa-miss-2) 6px 12px); }
.sa-p .w { font-weight: 700; font-size: .9rem; line-height: 1.2;
           background: var(--tp-surface); color: var(--tp-ink);
           border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.sa-p .w:empty { display: none; }
@container (max-width: 700px) {
  .sa-roofgrid { gap: 3px; }
  .sa-p { border-width: 1px; border-radius: 2px; }
  .sa-p .w { font-size: 11px; padding: 0 1px; border-radius: 2px; }
  .sa-p .u { display: none; }
}

.sa-legend { display: flex; align-items: center; gap: 10px; margin-top: 14px;
             font-size: .8rem; color: var(--tp-muted); flex-wrap: wrap; }
.sa-ramp { width: 12rem; max-width: 50%; height: 10px; border-radius: 5px;
           border: .0625rem solid var(--tp-line); background: var(--sa-ramp); }
.sa-missk { display: inline-block; width: 14px; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--sa-miss) 0 3px, var(--sa-miss-2) 3px 6px);
  border: .0625rem solid var(--tp-line); vertical-align: middle; }
.sa-note { font-size: .8rem; color: var(--tp-muted); margin: 10px 0 0; }
.sa-pick { margin: 12px 0 0; min-height: 1.5em; font-size: .9rem; color: var(--tp-ink-2);
           border-top: .0625rem solid var(--tp-hair); padding-top: 10px; }
.sa-pick b { color: var(--tp-ink); }

@media (max-width: 600px){.sa-back{font-size:var(--tp-phone-label)}}
@media (max-width: 600px){.sa .sa-eyebrow{font-size:max(12px, 1.84rem); flex-wrap:wrap}}
@media (max-width: 600px){.sa .sa-card{padding:12px}}
@media (max-width: 600px){.sa .sa-cond{grid-template-columns:1fr}}
@media (max-width: 600px){.sa .sa-cond > div{padding:12px 0 0; border-left:0}}
@media (max-width: 600px){.sa .sa-cond > div + div{border-top:.0625rem solid var(--tp-hair); margin-top:12px}}
@media (max-width: 600px){.sa .sa-big{font-size:48px}}
@media (max-width: 600px){.sa .sa-v{font-size:30px}}
@media (max-width: 600px){.sa .sa-k,.sa .sa-s,.sa .sa-lab,.sa .sa-legend,.sa .sa-note,.sa .sa-ticks,.sa .sa-seg button{font-size:var(--tp-phone-label)}}
@media (max-width: 600px){.sa .sa-kv,.sa .sa-pick{font-size:var(--tp-phone-body)}}
/* A phone's eight columns: AR6 and AR7 go under the rest, so a panel is
   44 px tall and more at 320, and the mode buttons are that tall too. */
@media (max-width: 600px){.sa .sa-roofgrid{grid-template-columns:repeat(8, minmax(0, 1fr))}}
@media (max-width: 600px){.sa .sa-lab,.sa .sa-p{grid-column:var(--pc) / span var(--n); grid-row:var(--pr)}}
@media (max-width: 600px){.sa .sa-lab[data-row="0"]{padding-top:10px}}
@media (max-width: 600px){.sa .sa-lab[data-prow="0"]{padding-top:0}}
@media (max-width: 600px){.sa .sa-seg button{min-height:44px}}