/* Copyright 2019-2026 by John A Kline.  See LICENSE.txt for your rights.
 *
 * The home page (index.html + smartphone.html) in the panel grammar the
 * celestial pages settled on and the forecast tabs, Highs/Lows, Graphs, the
 * imagery tabs and About have carried since.  Replaces the 2019 markup and
 * absorbs the retired css/scale_bars.css.
 *
 * ONE MARKUP, TWO SCALES.  current.inc is a single include shared by both
 * twins, so everything here is sized in em and the smartphone shell scales
 * the page with the .sp overrides at the bottom -- the arrangement
 * scale_bars.css already used to draw one markup at 330px and at 1000px.
 *
 * THE TEXT LADDER IS NOT NEW.  ink / ink-2 / ink-3 / muted / faint are the
 * five tiers css/liveseasons.css carries as --ls-*, derived against measured
 * grounds; nothing here re-picks one.
 *
 * THEMING.  .theme-dark is taken on the PANEL (.hm), the way css/about.css
 * takes it, not on the document -- where the site-wide switch eventually
 * puts it is still open (design/light-dark-scoping.md, item 5) and this page
 * must not settle that by accident.  There is deliberately no
 * prefers-color-scheme rule: until the site offers the switch, a reader
 * whose OS prefers dark must keep seeing this page as designed, and the
 * chrome above it (titlebar.inc, menubar.inc) is still light in any case.
 *
 * ---------------------------------------------------------------------
 * THE SCALE COLORS ARE A KEY, NOT DECORATION.  The AQI ladder is the EPA's
 * and the UV ladder is the WHO's -- published scales a reader may already
 * know -- and the rest are this station's own but are read the same way: the
 * color IS the claim.  So the seven ladders below do NOT change under
 * .theme-dark, exactly as css/radar.css keeps NWS RIDGE and css/about.css
 * keeps the OpenStreetMap tile in their own colors.  What themes is the
 * chrome around them: the rail a bar sits in, the marker (which was `black`
 * and would vanish on a dark card), and every label.
 *
 * They live HERE rather than in scripts/scale_bars.js, which used to write
 * all 44 into element.style.backgroundColor.  A <div> can be repainted by a
 * stylesheet; that is the whole reason for moving them, and it is the
 * pattern scripts/graphs.js already uses one page over.  The canvases --
 * the wind compass and the rain tubes -- cannot be repainted that way, so
 * scripts/current_gauges.js reads the --cg-* roles at the bottom of this
 * file with getComputedStyle and redraws instead.
 */

/* ---- the instrument roles the canvases read ------------------------- */
/* scripts/current_gauges.js reads these nine with getComputedStyle at draw
   time.  They are NOT duplicated in the javascript: it has fallbacks for a
   stylesheet that failed to load and nothing else. */
.hm {
    --cg-face:#ffffff;
    --cg-rim:#666666;
    --cg-track:#c9d1da;
    --cg-ink:#333333;
    --cg-muted:#777777;
    --cg-ghost:#9db0c0;
    --cg-needle:#4282b4;
    --cg-water:#4282b4;
    --cg-waterline:#7fb2d3;
}
.hm.theme-dark {
    --cg-face:#0e1430;
    --cg-rim:#3d4a7d;
    --cg-track:#2a3358;
    --cg-ink:#e9e4d4;
    --cg-muted:#8b93b8;
    --cg-ghost:#4a5680;
    --cg-needle:#7fb3d5;
    --cg-water:#3f7bab;
    --cg-waterline:#7fb3d5;
}

/* ---- the panel ------------------------------------------------------ */
.hm {
    padding: 0 0 34px;
    font-size: 16px;
    color: var(--ls-ink);
    text-align: left;
    font-family: 'Open Sans', arial, sans-serif;
}
.hm .hmwrap {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hm section {
    background: var(--ls-surface);
    border: 1px solid var(--ls-line);
    padding: 14px 16px 18px;
}
.hm .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;
}
/* An eyebrow with a sentence opposite it.  The aside is deliberately not
   uppercase: it is prose, and the eyebrow is a label. */
.hm .eyebrow--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.hm .eyebrow .aside {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ls-muted);
}
.hm .caption {
    color: var(--ls-muted);
    font-size: 0.85em;
    margin: 14px 0 0;
    max-width: 86ch;
    line-height: 1.55;
}
.hm .caption b { color: var(--ls-ink-3); }
.hm h3.railh {
    color: var(--ls-accent);
    font-weight: 600;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 20px 0 8px;
}
.hm h3.railh:first-child { margin-top: 0; }
.hm a { color: var(--ls-link); text-decoration: none; }
.hm a:hover { text-decoration: underline; }

/* ---- the page head -------------------------------------------------- */
.hm .hmhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 6px 2px 10px;
}
.hm h1.ptitle {
    margin: 0;
    font-size: 2.1em;
    font-weight: 600;
    color: var(--ls-accent);
    letter-spacing: 0.02em;
}
.hm h1.ptitle .over { color: var(--ls-muted); font-weight: 400; }
.hm #live-label { font-size: 0.5em; font-weight: 700; letter-spacing: 0.06em; }
.hm #activity-string {
    font-size: 0.45em;
    color: var(--ls-faint);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---- the masthead --------------------------------------------------- */
/* What the station is doing right now, at the width the question deserves.
   Three cells with hairline dividers; align-items:stretch so the dividers
   run the full height whatever each cell holds. */
.hm .hmast {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.35fr;
    align-items: stretch;
}
.hm .hmast > div { padding: 4px 22px; }
.hm .hmast > div + div { border-left: 1px solid var(--ls-hair); }
.hm .hmbig {
    font-size: 4.6em;
    font-weight: 700;
    line-height: 0.96;
    font-variant-numeric: tabular-nums;
    color: var(--ls-ink);
    white-space: nowrap;
}
.hm .hmbig .u {
    font-size: 0.3em;
    font-weight: 400;
    color: var(--ls-muted);
    vertical-align: 0.9em;
    margin-left: 4px;
}
.hm .hmsub {
    color: var(--ls-muted);
    font-size: 0.88em;
    margin-top: 10px;
    line-height: 1.7;
}
.hm .hmsub b {
    color: var(--ls-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
/* The temperature ramp restated under the headline number, so the big
   figure still carries the scale the bar gave it. */
.hm .hmast .scale-bar { margin: 14px 0 0; padding-right: 7px; }

.hm .hmwind { text-align: center; }
.hm .hmwind canvas { display: block; margin: 2px auto 4px; }
.hm .hmnum {
    font-size: 1.9em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hm .hmnum .u { font-size: 0.48em; font-weight: 400; color: var(--ls-muted); }
.hm .gustline { color: var(--ls-muted); font-size: 0.85em; }

.hm .hmtubes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}
.hm .hmtubes canvas { display: block; margin: 2px auto; }
.hm .hmtubes .hmnum { font-size: 1.5em; }
.hm .ilab {
    font-size: 0.72em;
    color: var(--ls-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.hm .hmline {
    border-top: 1px solid var(--ls-hair);
    margin-top: 10px;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.9em;
}
.hm .hmline b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- the measures rail ---------------------------------------------- */
/* Measure, reading, what it reads as, and the scale, each in its own
   column, so the bars line up as a column the eye can run down.  The old
   page gave every bar its own block with its label above it, and nothing
   lined up with anything -- seven scales that invite comparison, drawn so
   they could not be compared.  Same alignment as the Highs/Lows ledger. */
/* A REAL TABLE, because this is one.  Four columns under a header row,
   one row per measure -- the same shape HiloStats.ledger draws as
   <table class="hl-ledger">, and the shape the page this replaced used
   too.  Divs with display:contents laid out identically and told a screen
   reader nothing: no header association, so "58.1" arrived with no idea
   that it was the dewpoint. */
.hm .hrail {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.hm .hrail thead th {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--ls-muted);
    text-align: left;
    border-bottom: 1px solid var(--ls-rule);
    /* the body cells' right gutter, so a right-aligned "Reading" does not
       butt against "Reads as" */
    padding: 0 20px 6px 0;
}
.hm .hrail thead th:last-child { padding-right: 0; }
.hm .hrail thead th.rval { text-align: right; }
.hm .hrail col,
.hm .hrail th:nth-child(1) { width: 190px; }
.hm .hrail th:nth-child(2) { width: 120px; }
.hm .hrail th:nth-child(3) { width: 26%; }
.hm .hrail tbody th,
.hm .hrail tbody td {
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid var(--ls-hair);
    vertical-align: middle;
}
.hm .hrail tbody td:last-child { padding-right: 0; }
.hm .hrail tbody tr:last-child th,
.hm .hrail tbody tr:last-child td { border-bottom: 0; }
.hm .rlabel { font-weight: 600; color: var(--ls-ink-2); text-align: left; }
.hm .rval {
    text-align: right;
    font-weight: 700;
    font-size: 1.18em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hm .rcat { color: var(--ls-ink-3); font-size: 0.9em; }
.hm .rcat .rextra {
    display: block;
    font-size: 0.86em;
    color: var(--ls-muted);
}
/* A reading is a reading even when it links out: the AQI value and its
   category both point at PurpleAir, and the markup this replaced forced
   them black for the same reason. */
.hm .rval a,
.hm .rcat a { color: inherit; }

/* ---- the scale bars themselves --------------------------------------- */
/* Geometry from the retired css/scale_bars.css, which targeted iPad
   Safari's rendering of the font-sized bars this replaced (measured
   2026-07-23 via mockups/bar-metrics.html): Safari ceils the font ascent
   and descent, so the old 5px/18px spans painted 8px/26px there. */
.hm .scale-bar { padding: 0 7px; }
.hm .scale-track {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 2px;
    /* The rail a bar sits in -- what shows when there is no reading, and
       what keeps a pale segment (EPA "Good" green, UV yellow) off a white
       card.  Chrome, so it themes. */
    background: var(--ls-hair);
    box-shadow: 0 0 0 1px var(--ls-hair) inset;
}
/* Segments are sized purely by flex-grow (their share of the range). */
.hm .scale-track > div { flex-basis: 0; }
/* THE MARKER IS THE LAST CHILD.  scale_bars.js appends the segments and
   then appends .scale-marker, so a bare :last-child rounds the marker --
   a zero-size absolutely-positioned triangle -- and leaves the bar's right
   end square.  On the gradient temperature track only the marker is
   appended, so :first-child hits it too.  Hence :nth-last-child(2) for the
   last segment and the :not() guard on the first.
   overflow:hidden on the track is the usual way to do this and is wrong
   here: the marker sits at top:100%, outside the track, and would be
   clipped away. */
.hm .scale-track > div:not(.scale-marker):first-child {
    border-radius: 2px 0 0 2px;
}
.hm .scale-track > div:not(.scale-marker):nth-last-child(2) {
    border-radius: 0 2px 2px 0;
}
/* The marker matches iPad Safari's ink for the retired U+25B2 glyph
   (13.86x9.69 at 14px -- Open Sans has no such glyph, so every browser
   substituted its own; Safari's is wide and squat and sits flush). */
.hm .scale-marker {
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* was `black`: the one scale-bar color that is chrome, not key */
    border-bottom: 10px solid var(--ls-ink);
}

/* THE SEVEN LADDERS.  scripts/scale_bars.js names the class; the color is
   here and nowhere else.  Temperature is a continuous ramp rather than
   segments (stops approximate 0/20/40/60/80/105 degrees F). */
.hm .temperature-track {
    background: linear-gradient(to right,
        #0000ff 0%,
        #00ffff 20%,
        #00ff00 40%,
        #ffff00 60%,
        #ff8000 80%,
        #ff0000 100%
    );
}
/* Barometer -- this station's own ladder. */
.hm .s-baro-1 { background: #B00000; }
.hm .s-baro-2 { background: #FF6600; }
.hm .s-baro-3 { background: #FFFF00; }
.hm .s-baro-4 { background: #66CC66; }
.hm .s-baro-5 { background: #3399FF; }
/* AQI -- the EPA's published colors. */
.hm .s-aqi-1 { background: #00E400; }
.hm .s-aqi-2 { background: #FFFF00; }
.hm .s-aqi-3 { background: #FF7E00; }
.hm .s-aqi-4 { background: #FF0000; }
.hm .s-aqi-5 { background: #8F3F97; }
.hm .s-aqi-6 { background: #7E0023; }
/* UV -- the WHO's published colors. */
.hm .s-uv-1 { background: #00CC00; }
.hm .s-uv-2 { background: #FFFF00; }
.hm .s-uv-3 { background: #FF8000; }
.hm .s-uv-4 { background: #FF0000; }
.hm .s-uv-5 { background: #AA00FF; }
/* Solar radiation. */
.hm .s-rad-1 { background: #000033; }
.hm .s-rad-2 { background: #0044FF; }
.hm .s-rad-3 { background: #00CC00; }
.hm .s-rad-4 { background: #FFFF00; }
.hm .s-rad-5 { background: #FF8000; }
.hm .s-rad-6 { background: #FF0000; }
/* Carbon dioxide. */
.hm .s-co2-1 { background: #00BFFF; }
.hm .s-co2-2 { background: #00CC00; }
.hm .s-co2-3 { background: #CCCC00; }
.hm .s-co2-4 { background: #FFFF00; }
.hm .s-co2-5 { background: #FF8000; }
.hm .s-co2-6 { background: #FF0000; }
/* Dewpoint, which has three ladders: comfort depends on the temperature,
   and scale_bars.js rebuilds the track when the regime changes. */
.hm .s-dpw-1 { background: #E6D2AA; }
.hm .s-dpw-2 { background: #DBC49C; }
.hm .s-dpw-3 { background: #99CCCC; }
.hm .s-dpw-4 { background: #66B3B3; }
.hm .s-dpw-5 { background: #409999; }
.hm .s-dpw-6 { background: #006666; }
.hm .s-dpw-7 { background: #004040; }
.hm .s-dpi-1 { background: #E6D2AA; }
.hm .s-dpi-2 { background: #66B3B3; }
.hm .s-dpi-3 { background: #006666; }
.hm .s-dpc-1 { background: #DBC49C; }
.hm .s-dpc-2 { background: #99CCCC; }
.hm .s-dpc-3 { background: #66B3B3; }
.hm .s-dpc-4 { background: #409999; }
.hm .s-dpc-5 { background: #006666; }
.hm .s-dpc-6 { background: #004040; }

/* ---- Today's highs and lows, at full width --------------------------- */
/* The front widget dropped its group NAMES for one reason: 168px it did not
   have in a 32% column (HiloStats.front's docstring measured it).  At full
   width it has them, so they are back.  Groups are placed into explicit
   columns rather than left to auto-flow -- five items into three tracks
   puts groups 1 and 4 together and leaves the third holding two rows. */
.hm .hlgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    align-items: start;
}
.hm .hlgrid .railh { margin: 16px 0 2px; }
.hm .hlgrid .hlcol > .hlgroup:first-child .railh { margin-top: 0; }

/* ---- twilight & daylight -------------------------------------------- */
/* THE KEY THE DAY STRIP HAS NEVER HAD.  smRenderStrip in
   realtime_updater.inc has shaded five bands since 7.2 -- night and the
   three twilight depths and daylight -- and nothing has ever said what they
   are.  Each swatch below is an SVG <rect> carrying the SAME band-* class
   the strip's own rectangles carry, so celestial.css paints both from one
   rule and no color is duplicated to drift. */
/* A table, for the same reason the measures rail is one: a header row over
   keyed rows of times.  The swatch lives in the row header, which is what
   makes the key a key -- the reader gets "Civil, begins 6:17 AM" rather
   than a loose time. */
.hm .twgrid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}
.hm .twgrid th,
.hm .twgrid td { vertical-align: baseline; }
.hm .twgrid thead th {
    font-size: 0.68em;
    color: var(--ls-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: right;
    border-bottom: 1px solid var(--ls-rule);
    padding: 0 0 4px 14px;
}
/* The empty corner cell, whose label is for a screen reader only. */
.hm .twgrid .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.hm .twgrid .twname {
    font-size: 0.88em;
    color: var(--ls-ink-2);
    font-weight: 600;
    text-align: left;
    padding-top: 6px;
}
.hm .twgrid .twname em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 0.82em;
    color: var(--ls-faint);
    margin-left: 20px;
}
.hm .twgrid .twsw {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    outline: 1px solid var(--ls-rule);
}
.hm .twgrid .twt {
    text-align: right;
    font-size: 0.92em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 6px 0 0 14px;
    white-space: nowrap;
}
.hm .twfoot {
    border-top: 1px solid var(--ls-rule);
    margin-top: 12px;
    padding-top: 9px;
    font-size: 0.88em;
}
.hm .twfoot > div + div { margin-top: 3px; }
.hm .twfoot .k { color: var(--ls-muted); }
.hm .twfoot b { font-variant-numeric: tabular-nums; }
.hm .twfoot .d { color: var(--ls-faint); font-size: 0.9em; }

/* ---- the NWS forecast ------------------------------------------------ */
.hm .fcname {
    color: var(--ls-accent);
    font-weight: 600;
    font-size: 1.15em;
    margin-bottom: 4px;
}
.hm .fctext {
    margin: 0;
    line-height: 1.55;
    color: var(--ls-ink-2);
    font-size: 0.95em;
}
.hm .fcmore { display: inline-block; margin-top: 8px; font-size: 0.86em; }
.hm .fcsrc { color: var(--ls-faint); font-size: 0.8em; margin-bottom: 6px; }

/* ---- downstream systems ---------------------------------------------- */
/* Was an eleven-row table of label/link pairs.  A grid of name-over-
   identifier reads as a directory rather than as data, and it is half the
   height -- which is part of what lets this column end level with the one
   opposite. */
.hm .hds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ls-hair);
    border: 1px solid var(--ls-hair);
}
.hm .hds a {
    display: block;
    background: var(--ls-surface);
    padding: 7px 10px;
}
.hm .hds .n {
    display: block;
    font-size: 0.72em;
    color: var(--ls-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.hm .hds .i {
    display: block;
    font-size: 0.88em;
    color: var(--ls-link);
    font-variant-numeric: tabular-nums;
}
/* An odd number of systems would leave a twelfth cell showing as an empty
   box; the last one takes the full width instead.  Written as a rule
   rather than a hand-placed filler so adding or removing a system stays a
   one-line edit to downstream_table.inc. */
.hm .hds a:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- the two-column row, ending flush -------------------------------- */
/* THE BOTTOMS ARE FLUSH BY CONSTRUCTION, NOT BY CONTENT.  The NWS forecast
   paragraph is a different length every day -- it is written by someone
   else -- so a column holding it has a height that moves overnight, and
   matching the two columns by tuning content is true the afternoon it is
   measured and wrong the next morning.  The row stretches and the last
   panel in each column absorbs the slack. */
.hm .hmcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}
.hm .hmcols > div {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hm .hmcols > div > section:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* ...and the slack goes into the directory's rows rather than pooling as
   white space beneath it. */
.hm .hmcols > div > section:last-child > .hds {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
}

/* ---- the smartphone twin --------------------------------------------- */
/* One markup, restacked.  The phone renders at the same 1124 viewport and
   scales by font size, so everything above is in em and the only geometry
   that changes is the rail's, which stops being a grid. */
/* THE BASE IS 48px, NOT A GUESS.  The page this replaced ran #contents at
   52px and drew its labels and readings at 42px, and its forecast prose at
   52px; the twin renders at the same 1124 viewport, so those are the sizes
   a reader's phone actually showed.  A smaller base looks fine in a 1124px
   desktop window and is half-size on the device.  The multipliers below
   are chosen against those measurements, not against the desktop's. */
.hm.hm-sp { font-size: 48px; }
.hm-sp .hmwrap { gap: 0.4em; }
.hm-sp section { padding: 0.45em 0.5em 0.6em; }
.hm-sp .eyebrow { font-size: 0.6em; margin-bottom: 0.4em; }
.hm-sp .caption { font-size: 0.72em; }
.hm-sp h1.ptitle { font-size: 1.4em; }
.hm-sp h3.railh { font-size: 0.6em; }
.hm-sp .hmhead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
}

/* The masthead stacks: the temperature cell takes the width, and the wind
   and rain cells follow beneath it. */
.hm-sp .hmast { display: block; }
.hm-sp .hmast > div { padding: 0; }
.hm-sp .hmast > div + div {
    border-left: 0;
    border-top: 1px solid var(--ls-hair);
    margin-top: 0.5em;
    padding-top: 0.5em;
}
.hm-sp .hmbig { font-size: 2.2em; }
.hm-sp .hmsub { font-size: 0.78em; margin-top: 0.3em; }
.hm-sp .hmnum { font-size: 1.15em; }
.hm-sp .hmtubes .hmnum { font-size: 1.05em; }
.hm-sp .ilab { font-size: 0.6em; }
.hm-sp .gustline { font-size: 0.7em; }
.hm-sp .hmline { font-size: 0.8em; }
.hm-sp .hmast .scale-bar { margin-top: 0.3em; }

/* The rail becomes stacked rows: the reading big, the scale full width. */
.hm-sp .hrail,
.hm-sp .hrail tbody { display: block; }
.hm-sp .hrail thead { display: none; }
.hm-sp .hrail tr {
    display: block;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--ls-hair);
}
.hm-sp .hrail tbody tr:last-child { border-bottom: 0; }
/* tbody, not bare th/td: `.hm .hrail tbody th` is (0,2,2) and an
   unqualified `.hm-sp .hrail th` is (0,2,1), so the desktop padding and
   hairline won -- on cells that are display:inline, which drew an
   underline through every measure's text and a 20px hole after it. */
.hm-sp .hrail tbody th,
.hm-sp .hrail tbody td {
    padding: 0;
    border: 0;
    display: inline;
}
.hm-sp .rlabel { font-size: 0.85em; color: var(--ls-muted); }
.hm-sp .rval { font-size: 1em; margin-left: 0.25em; }
.hm-sp .rcat { display: inline; font-size: 0.8em; margin-left: 0.3em; }
.hm-sp .rcat .rextra { display: inline; margin-left: 0.5em; }
.hm-sp .rbar { display: block; margin-top: 0.35em; }
.hm-sp .scale-bar { padding: 0 0.35em; }
.hm-sp .scale-track { height: 0.5em; margin-bottom: 0.9em; }
.hm-sp .scale-marker {
    border-left-width: 0.28em;
    border-right-width: 0.28em;
    border-bottom-width: 0.56em;
}
.hm-sp .fcname { font-size: 1.1em; }
.hm-sp .fctext { font-size: 1em; }
.hm-sp .fcmore { font-size: 0.8em; }
.hm-sp .fcsrc { font-size: 0.68em; }

/* ---- dark ------------------------------------------------------------ */
/* The Sun & Moon widget is styled by css/celestial.css, which the five
   celestial pages share and which this release deliberately does not
   touch -- those pages are their own item (design/light-dark-scoping.md,
   item 4, and they reach into weewx-skyfield).  So the widget's dark
   values are set HERE instead, scoped to this panel: celestial.css keeps
   its light rules as the base, exactly as it does for .cnight.
   Specificity: .hm.theme-dark .cpanel-widget X is (0,4,0) against
   celestial.css's .cpanel X at (0,2,0). */
.hm.theme-dark .cpanel-widget { color: var(--ls-ink); }
.hm.theme-dark .cpanel-widget .band-night { fill: #070b18; }
.hm.theme-dark .cpanel-widget .band-astro { fill: #131b38; }
.hm.theme-dark .cpanel-widget .band-naut  { fill: #1f2a4e; }
.hm.theme-dark .cpanel-widget .band-civil { fill: #2c3a66; }
.hm.theme-dark .cpanel-widget .band-day   { fill: #3d4d80; }
.hm.theme-dark .cpanel-widget .moon-dark  { fill: #080d1c; }
.hm.theme-dark .cpanel-widget .moon-lit   { fill: #e9e4d4; }
.hm.theme-dark .cpanel-widget .moon-ring  { stroke: var(--ls-rule); }
.hm.theme-dark .cpanel-widget .gridlab    { fill: var(--ls-faint); }
.hm.theme-dark .cpanel-widget .gridline   { stroke: var(--ls-rule); }
.hm.theme-dark .cpanel-widget .tick-moon  { stroke: #d6dae0; }
.hm.theme-dark .cpanel-widget .nowlab     { fill: var(--ls-hi); }
.hm.theme-dark .cpanel-widget .tile {
    background: var(--ls-tint);
    border-color: var(--ls-hair);
}
.hm.theme-dark .cpanel-widget .smnext,
.hm.theme-dark .cpanel-widget .mpct { color: var(--ls-muted); }
.hm.theme-dark .cpanel-widget .k { color: var(--ls-muted); }
.hm.theme-dark .cpanel-widget .s { color: var(--ls-faint); }