/*
 * The Highs & Lows pages -- statistics.html, its smartphone twin, and the
 * front page's Today's Highs/Lows widget.
 * Copyright (C) John Kline 2019-2026
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 *
 * The page in the panel grammar the forecast tabs and the celestial pages
 * settled on: white sections with a hairline border on the light page,
 * accent eyebrows, muted captions, everything sized in em so the
 * smartphone twin scales with one .hl-sp modifier -- the way
 * css/tides.css forks on .xg-sp and css/almanac.css on .al-sp.
 *
 * THEMING.  Every color here is one of the --ls-* tokens promoted into
 * css/liveseasons.css, not a fourth private copy of the same measured
 * ladder; .theme-dark redefines them there.  There is deliberately no
 * prefers-color-scheme rule: until the site offers the switch, a reader
 * whose OS prefers dark must keep seeing the page as designed.
 *
 * The one exception is the front-page widget, which is light-only ON
 * PURPOSE -- see .hl-fp at the bottom.
 */

/* ---- shared shell --------------------------------------------------- */
.hl {
    color: var(--ls-ink);
    text-align: left;
}
.hl .hlwrap {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hl section {
    background: var(--ls-surface);
    border: 1px solid var(--ls-line);
    padding: 14px 16px 18px;
}
.hl .eyebrow {
    color: var(--ls-accent);
    font-weight: 600;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    border: 0;
    padding: 0;
}
.hl .hlhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    border-bottom: 2px solid var(--ls-head-rule);
    padding-bottom: 8px;
}
.hl h2.htitle {
    margin: 0;
    font-size: 2.1em;
    font-weight: 600;
    color: var(--ls-accent);
    letter-spacing: 0.02em;
}
.hl h2.htitle .over {
    color: var(--ls-muted);
    font-weight: 400;
}
/* The activity indicator and the LIVE label, which common_updater.inc
   drives.  The label's color is set from getActivityStrColor at run
   time, so only its size and weight are set here. */
.hl .hlhead .actstr {
    font-family: "Lucida Console", Courier, monospace;
    color: var(--ls-faint);
    font-size: 0.42em;
    vertical-align: middle;
    margin-left: 12px;
}
.hl .hlhead .live {
    font-weight: bold;
    font-size: 0.42em;
    vertical-align: middle;
    margin-left: 4px;
}
.hl .sub {
    color: var(--ls-muted);
    font-size: 0.95em;
    padding-bottom: 4px;
    text-align: right;
    line-height: 1.5;
}
.hl .cfoot {
    color: var(--ls-muted);
    font-size: 0.82em;
    border-top: 1px solid var(--ls-rule);
    padding-top: 10px;
    margin: 0;
}

/* ---- the desktop ledger --------------------------------------------- */
.hl-ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
    table-layout: fixed;
}
.hl-ledger thead th {
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ls-muted);
    padding: 0 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--ls-rule);
}
.hl-ledger thead th.mcol {
    text-align: left;
    width: 112px;
}
.hl-ledger thead th.today {
    color: var(--ls-accent);
}
.hl-ledger tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--ls-ink);
    padding: 9px 10px 9px 0;
    vertical-align: top;
    white-space: nowrap;
}
.hl-ledger tbody th .u {
    display: block;
    font-weight: 400;
    font-size: 0.86em;
    color: var(--ls-faint);
}
.hl-ledger tbody tr + tr th,
.hl-ledger tbody tr + tr td {
    border-top: 1px solid var(--ls-hair-2);
}
.hl-ledger td {
    padding: 9px 6px;
    vertical-align: top;
}
.hl-ledger td.today {
    background: var(--ls-tint);
}

/* One value line: the figure right-aligned in its own column, the stamp
   beside it.  This is what retires the two-line "09:24:41 / AM" the page
   carried in every one of its 144 timestamps -- the figure column never
   has to share width with the stamp, so neither has to wrap.  The stamp
   itself may wrap on the widest rows (barometer under a long date), and
   the break falls at a space in the date. */
.hl .vline {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 8px;
}
.hl .vline + .vline {
    margin-top: 3px;
}
/* The figure and any static suffix share the first grid column, so the
   suffix sits with its number and the live pass -- which replaces the
   figure span's contents and nothing else -- cannot carry it away. */
.hl .vline .vcell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hl .vline .v {
    font-weight: 700;
    font-size: 1.16em;
}
.hl .vline .sfx {
    font-weight: 700;
    font-size: 1.16em;
    color: var(--ls-ink-3);
}
.hl .vline .t {
    font-size: 0.8em;
    color: var(--ls-faint);
    text-align: left;
    line-height: 1.3;
}
.hl .vline.hi .v {
    color: var(--ls-hi);
}
.hl .vline.lo .v {
    color: var(--ls-lo);
}
.hl .vline .v::before {
    font-size: 0.68em;
    margin-right: 4px;
    vertical-align: 0.14em;
    font-weight: 400;
}
.hl .vline.hi .v::before {
    content: "\25B2";
}
.hl .vline.lo .v::before {
    content: "\25BC";
}
/* A single figure with no opposite -- a rain total, a wind average. */
.hl .vline.plain .v {
    color: var(--ls-ink-2);
}
/* The direction under a wind figure: context, not an extreme. */
.hl .vline.dir .v,
.hl .vline.dir .sfx {
    color: var(--ls-ink-3);
    font-weight: 600;
    font-size: 1em;
}

/* The badge: how far back you have to go to beat what this period did.
   Trivial ties are suppressed -- a zero, or a measure that never moved --
   or every flat row would wear one and none of them would mean anything.
   The rule lives in HiloStats.badge_parts and in scripts/hilo.js, which
   the tests hold to each other. */
.hl .tiewrap {
    margin-top: 5px;
}
/* 63 of the 72 holders are empty on a typical day -- a badge is the
   exception, not the rule -- and each was still reserving its margin
   under the figures in its cell.  Collapse the empty ones so an
   unbadged row is not padded for a badge it does not have. */
.hl .tiewrap:empty {
    margin-top: 0;
}
.hl .tie {
    display: inline-block;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    vertical-align: 0.18em;
    color: var(--ls-on-accent);
    background: var(--ls-accent);
}
.hl .tie.rec {
    background: var(--ls-hi);
}

/* Year and Rain Year are the same figures for eight months of the year.
   Folded into one column they cost 150px less width -- which is what
   lets the barometer row, the widest on the page, sit on one line -- and
   read as a choice rather than as a duplicate.  Every section's heading
   is a switch and they all drive the one state, so the page holds one
   choice however many places it can be made. */
.hl-ledger thead th.yrhead {
    white-space: nowrap;
    padding-bottom: 7px;
}
.hl .yrsw {
    background: none;
    border: 0;
    padding: 0 1px;
    cursor: pointer;
    font: inherit;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ls-faint);
}
.hl .yrsw.on {
    color: var(--ls-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.hl .yrsw:hover {
    color: var(--ls-link);
}
.hl .yrsep {
    color: var(--ls-rule);
    padding: 0 2px;
}
/* Until the script runs, show Year -- the same column the page showed
   before the two were folded together. */
.hl .pc-rainyear,
.hl.yr-year .pc-rainyear {
    display: none;
}
.hl.yr-rainyear .pc-rainyear {
    display: table-cell;
}
.hl.yr-rainyear .pc-year {
    display: none;
}

/* ---- the smartphone twin -------------------------------------------- */
/* The phone page renders at the same width=1124 viewport the desktop
   twin does, at roughly four times the type size, and shows one period
   at a time -- so the annual switch is a desktop concern and the six
   period tabs stay.  What the phone gains is the stamps: they exist on
   the page it replaces only in title= attributes, which a phone cannot
   show at all, and the right half of the screen was empty. */
.hl-sp {
    padding: 12px 14px 36px;
    font-size: 40px;
}
.hl-sp .hlhead {
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.hl-sp h2.htitle {
    font-size: 1.15em;
}
.hl-sp .hlhead .actstr,
.hl-sp .hlhead .live {
    font-size: 0.4em;
}
.hl-sp section {
    padding: 14px 18px 16px;
    margin-bottom: 14px;
}
.hl-sp .eyebrow {
    font-size: 0.52em;
    margin-bottom: 14px;
}
.hl-sp .sprow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 10px 0;
}
.hl-sp .sprow + .sprow {
    border-top: 1px solid var(--ls-hair-2);
}
.hl-sp .splabel {
    font-weight: 600;
    line-height: 1.2;
}
.hl-sp .splabel .u {
    display: block;
    font-weight: 400;
    font-size: 0.62em;
    color: var(--ls-faint);
    margin-top: 2px;
}
.hl-sp .spvals {
    text-align: right;
}
.hl-sp .vline .v {
    font-size: 1.06em;
}
.hl-sp .vline .t {
    font-size: 0.6em;
    min-width: 5.2em;
}
.hl-sp .tiewrap {
    margin-top: 8px;
}
.hl-sp .tie {
    font-size: 0.42em;
    padding: 3px 9px;
}

/* The six period tabs as one segmented control, the same shape the
   desktop page's annual switch uses.  flex-basis auto, not 0: the two
   long labels need more than an equal share and were being squeezed. */
.spnav {
    display: flex;
    margin: 14px 14px 0;
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--ls-head-rule);
}
.spnav .spbtn {
    flex: 1 1 auto;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 34px;
    font-weight: 600;
    padding: 14px 10px;
    color: var(--ls-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 5px solid transparent;
    margin-bottom: -2px;
}
.spnav .spbtn.on {
    color: var(--ls-accent);
    border-bottom-color: var(--ls-accent);
}

/* ---- the front-page widget ------------------------------------------
   32% of the front page, about 340px, beside the Sun & Moon column.

   FLAT, AND LIGHT-ONLY, BOTH ON PURPOSE.  The front page is not
   theme-ready: its widgets sit directly on the page ground with a title
   and a rule, and only the Sun & Moon panel's sunrise/sunset boxes are
   white -- so a white card here reads as pasted on.  With no card the
   row rules take the home page's OWN --cell-border-color, because the
   panel palette's hairline is nearly white and would vanish on #e3e3e3.
   That token has no dark value, which is what makes this widget
   light-only; it follows whenever the front page itself does, not
   before.  The extremes keep their color, which is the point.

   The groups are kept as rules rather than as labeled eyebrows.  The
   headings are not free here the way they are on the Highs/Lows page:
   they measured 168px, and the widget has only 132px of slack before it
   becomes the tallest of the three columns and stretches the whole front
   page.  As rules they cost 10px and the boundaries still read; the
   group names live on the Highs/Lows page, where there is room.

   High beside low on ONE line, not stacked: stacked with stamps the
   widget measured 1,214px against the 686px it replaces.  The stamps go
   back to title=, which is where they already were. */
.hl-fp {
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.hl-fp .gbreak {
    border-top: 1px solid var(--cell-border-color);
    margin: 8px 0 3px;
}
.hl-fp .fprow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
}
.hl-fp .fprow + .fprow {
    border-top: 1px solid var(--cell-border-color);
}
.hl-fp .fplabel {
    font-weight: 600;
    line-height: 1.25;
}
.hl-fp .fplabel .u {
    display: block;
    font-weight: 400;
    font-size: 0.82em;
    color: var(--ls-faint);
}
.hl-fp .fpvals {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.hl-fp .vline {
    display: inline;
    margin: 0;
}
.hl-fp .vline .v {
    font-size: 1.05em;
}
.hl-fp .tiewrap {
    margin: 0;
}
.hl-fp .tie {
    font-size: 0.62em;
    padding: 1px 4px;
}