/*
 * CSS for the LiveSeasons home pages' scale bars (temperature, dewpoint,
 * barometer, AQI, UV, radiation, CO2).  scripts/scale_bars.js builds the
 * segments and moves the marker; this file is the only place the desktop
 * (330x5) and smartphone (1000x18, .sp) geometries exist.  Absorbs the
 * temperature gradient from the retired temperature_gauge.css.
 * Copyright (C) John Kline 2026
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 */

/* Horizontal padding is half the marker width, so a marker clamped to a
 * track end still has room for its overhanging half. */
.scale-bar {
  padding: 0 7px;
}

/* The label line starts where the track does (the old markup indented
 * both by the same half-marker offset). */
.scale-widget > table {
  margin-left: 7px;
}

/* Geometry targets iPad Safari's rendering of the retired font-sized
 * bars (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 (Chromium: 6px/24px -- one fixed size cannot match both, and the
 * kiosks are iPads).  The bottom margin is the old triangle line's FULL
 * flow height (its position:relative raise moved ink, not space):
 * Safari's line box at 14px/50px fonts. */
.scale-track {
  position: relative;
  display: flex;
  height: 8px;
  width: 330px;
  margin-bottom: 20px;
}

/* Segments are sized purely by flex-grow (their share of the range). */
.scale-track > div {
  flex-basis: 0;
}

/* The temperature bar is a continuous gradient, not segments
 * (stops approximate 0/20/40/60/80/105 degrees F). */
.temperature-track {
  background: linear-gradient(to right,
    #0000ff 0%,
    #00ffff 20%,
    #00ff00 40%,
    #ffff00 60%,
    #ff8000 80%,
    #ff0000 100%
  );
}

/* The marker matches iPad Safari's ink for the retired ▲ glyph
 * (13.86x9.69 at 14px, 49.49x34.64 at 50px -- Open Sans has no U+25B2, so
 * every browser substituted its own; Safari's is wide and squat and sits
 * flush against the bar). */
.scale-marker {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid black;
}

/* Smartphone geometry: same markup and JS, restyled. */
.sp .scale-bar {
  padding: 0 25px;
}

.scale-widget.sp > table {
  margin-left: 25px;
}

.sp .scale-track {
  height: 26px;
  width: 1000px;
  margin-bottom: 69px;
}

.sp .scale-marker {
  top: 100%;
  border-left-width: 18px;
  border-right-width: 18px;
  border-bottom-width: 36px;
}