/* Copyright (c) Ian Millard 2026. GNU General Public License v3 or later; see LICENSE. */
/* EcowittConsoleEmulator — laid out like the Ecowitt WH2560/HP2560 console, on a 1280×800 stage scaled to fit.
   On wider screens (Echo Show, 16:9 tablets) the landscape stage is made wider (--xw extra px,
   set by the script) so it fills the width; the panels spread out over the extra space. */

/* Navy: deep enough that the whole temperature colour scale (incl. blue/violet)
   keeps >= 3.8:1 contrast; text >= 10:1 */
:root, body[data-theme="navy"] {
  --bg: #11185a;
  --bg-grad: radial-gradient(ellipse at 35% 30%, #141c68 0%, #11185a 55%, #0e144c 100%);
  --dial: #0a0e3a;
  --fg: #ffffff;
  --fg-dim: #c9ccf5;
  --fg-faint: #858bd4;
  --line: #3c44a8;
  --ring-track: rgba(255,255,255,.10);
  --wind: #5fb7ff;
  --hum1: #5a8cff;
  --hum2: #9a6bff;
  --good: #3ddc6b;
  --bad: #ff4b4b;
  --warn: #ffc93a;
  --toolbar: #2a52b8;
  --toolbar-fg: #ffffff;
  --overlay-bg: rgba(8,10,40,.85);
  --panel-bg: #1a2280;
  --c1: #ffa23a; --c2: #5fb7ff; --c3: #c39bff; --c4: #4fd8b0; --grid: rgba(255,255,255,.12);
  --moon-track: #c9cdf2;
  --avg-arrow: #a7abb8;
}
body[data-theme="black"] {
  --bg: #000;
  --bg-grad: #000;
  --dial: #0b0b14;
  --fg: #f2f2f2;
  --fg-dim: #b7b7b7;
  --fg-faint: #6f6f6f;
  --line: #333;
  --ring-track: rgba(255,255,255,.08);
  --toolbar: #111;
  --toolbar-fg: #d0d0d0;
  --overlay-bg: rgba(0,0,0,.85);
  --panel-bg: #161616;
  --c1: #ff9a2e; --c2: #4aa8ff; --c3: #b88cff; --c4: #3fd0a4; --grid: rgba(255,255,255,.10);
  --moon-track: #b9bccc;
  --avg-arrow: #8e8e8e;
}
body[data-theme="light"] {
  --bg: #eef1fb;
  --bg-grad: linear-gradient(180deg, #f6f8ff 0%, #e4e9f8 100%);
  --dial: #dfe5fa;
  --fg: #161a4d;
  --fg-dim: #3b4180;
  --fg-faint: #7a80b5;
  --line: #b9c0e6;
  --ring-track: rgba(22,26,77,.10);
  --wind: #1f7fe0;
  --good: #1aa84a;
  --bad: #e02828;
  --warn: #d79b00;
  --overlay-bg: rgba(220,226,248,.85);
  --panel-bg: #ffffff;
  --c1: #e07800; --c2: #1f6fe0; --c3: #7a3fd6; --c4: #0e9c74; --grid: rgba(22,26,77,.12);
  --moon-track: #6b6fa0;
  --avg-arrow: #8a8d96;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: "Roboto Condensed", "Arial Narrow", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
/* The stage is drawn at a fixed design size and scaled to the screen. #sizer has
   the scaled size so the page scrolls correctly when the stage is taller than the
   screen (phone layout). */
/* top/right/bottom/left rather than 'inset' (not in older browsers, e.g. Silk on some Echo Shows) */
#viewport { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--bg); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#sizer { position: relative; flex: none; overflow: hidden; margin: 0 auto; }
#stage {
  position: absolute; left: 0; top: 0; width: calc(1280px + var(--xw, 0px)); height: 800px;
  background: var(--bg-grad); transform-origin: 0 0; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
svg { display: block; overflow: visible; }
section { position: absolute; }
.tap { cursor: pointer; }
.dim { color: var(--fg-dim); }
.unit { font-size: .6em; color: var(--fg-dim); font-weight: 500; margin-left: .15em; }
.na { color: var(--fg-faint); }
.sig { display: inline-flex; vertical-align: middle; color: var(--fg); }

/* dividers, as on the console */
.sep { position: absolute; background: var(--line); }
#sep-h1 { left: calc(790px + var(--xw, 0px)); top: 412px; width: 474px; height: 2px; }
#sep-h2 { left: calc(790px + var(--xw, 0px)); top: 604px; width: 474px; height: 2px; }
#sep-v  { left: calc(776px + var(--xw, 0px)); top: 424px; width: 2px; height: 310px; opacity: .7; }

/* header */
#hdr { position: absolute; left: 0; top: 0; width: calc(1280px + var(--xw, 0px)); height: 60px; display: flex; align-items: center; padding: 0 22px; }
#hdr-l { display: flex; align-items: center; gap: 14px; width: 400px; flex: none; }
#hdr-left { display: flex; align-items: center; gap: 14px; }
#hdr-title { flex: 1; min-width: 0; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 16px; }
#hdr-left .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; border: 1.5px solid var(--line); color: var(--fg-dim); font-size: 17px; font-weight: 700; text-decoration: none; }
#hdr-left .chip.radar { color: var(--fg); background: rgba(95,183,255,.14); border-color: var(--wind); font-family: inherit; cursor: pointer; }
#hdr-left .chip.radar:active { background: rgba(95,183,255,.3); }
#hdr-leak { display: flex; gap: 5px; }
#hdr-clock { font-size: 32px; font-weight: 500; white-space: nowrap; }
#hdr-clock #time { display: inline-block; min-width: 140px; text-align: right; margin-left: 34px; }

/* big gauges */
#g-out { left: calc(18px + var(--xw, 0px) * .24); top: 62px; width: 340px; height: 340px; }
#g-wind { left: calc(392px + var(--xw, 0px) * .74); top: 62px; width: 360px; height: 340px; }

/* right-hand top: soil / lightning, channel gauges */
#rt-top { left: calc(790px + var(--xw, 0px)); top: 66px; width: 474px; height: 64px; font-size: 19px; font-weight: 700; }
#soil { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#light { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#light .lines { display: flex; flex-direction: column; line-height: 1.25; font-size: 18px; }
#g-ch { left: calc(790px + var(--xw, 0px)); top: 136px; width: 474px; height: 272px; }

/* stats + AQ */
#stats { left: 8px; top: 424px; width: calc(764px + var(--xw, 0px)); height: 62px; display: grid; grid-template-columns: repeat(var(--ncol, 7), 1fr); text-align: center; }
/* labels too long to sit side by side (some languages): equal columns, labels fitted to them */
#stats.tight { grid-template-columns: repeat(var(--ncol, 7), minmax(0, 1fr)); column-gap: 4px; }
#stats > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
#stats .k { font-size: 17px; font-weight: 700; color: var(--fg-dim); white-space: nowrap; }
#stats.tight .k { overflow: hidden; text-overflow: ellipsis; }
#stats .v { font-size: 28px; font-weight: 500; margin-top: 6px; white-space: nowrap; }
#aq { left: 30px; top: 516px; width: 600px; height: 36px; display: flex; align-items: center; gap: 36px; font-size: 21px; font-weight: 700; white-space: nowrap; }
#aq .grp { display: inline-flex; align-items: center; gap: 8px; }
.aqi-dot { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

/* sun arc / moon */
#sky { left: calc(var(--xw, 0px) / 2); top: 548px; width: 776px; height: 200px; }

/* rain */
#rain { left: calc(790px + var(--xw, 0px)); top: 418px; width: 474px; height: 184px; }
#rain .icon { position: absolute; left: 0; top: 30px; width: 96px; text-align: center; }
#rain .src { display: inline-block; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--fg-dim); border: 1.5px solid var(--line); border-radius: 10px; padding: 1px 9px; }
#rain .rate { position: absolute; left: 112px; top: 14px; width: 180px; font-size: 20px; font-weight: 700; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rain .rate b { color: var(--fg); margin-left: 8px; }
#rain .day { position: absolute; left: 112px; top: 50px; font-size: 72px; font-weight: 700; line-height: 1; white-space: nowrap; }
#rain .day .unit { font-size: 24px; }
#rain .lbl { position: absolute; left: 112px; top: 136px; font-size: 21px; font-weight: 700; color: var(--fg-dim); }
#rain .list { position: absolute; left: 300px; top: 8px; width: 174px; font-size: 19px; font-weight: 700; }
#rain .list .row { display: flex; justify-content: space-between; line-height: 1.7; white-space: nowrap; }
#rain .list .row span:first-child { color: var(--fg-dim); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
#rain .list .row span:last-child { flex: none; }

/* barometer */
#baro { left: calc(790px + var(--xw, 0px)); top: 612px; width: 474px; height: 134px; }
#baro .k { position: absolute; left: 0; top: 10px; font-size: 20px; font-weight: 700; color: var(--fg-dim); }
#baro .reading { position: absolute; left: 0; top: 44px; white-space: nowrap; display: flex; align-items: baseline; gap: 10px; }
#baro .mode { font-size: 22px; font-weight: 700; color: var(--fg-dim); }
#baro .val { font-size: 54px; font-weight: 700; line-height: 1; }
#baro .u { font-size: 22px; font-weight: 700; color: var(--fg-dim); }
#baro .trend { position: absolute; left: 300px; top: 14px; text-align: center; width: 80px; }
#baro .delta { font-size: 19px; font-weight: 700; color: var(--fg-dim); margin-top: 6px; white-space: nowrap; }
#baro .fc { position: absolute; right: -6px; top: 22px; }

/* toolbar */
#toolbar { position: absolute; left: 0; bottom: 0; width: calc(1280px + var(--xw, 0px)); height: 50px; background: var(--toolbar); display: grid; grid-template-columns: repeat(6, 1fr); }
#toolbar button { appearance: none; background: none; border: 0; color: var(--toolbar-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#toolbar button:active { background: rgba(255,255,255,.15); }
#toolbar svg { width: 28px; height: 28px; }

/* overlay */

/* rain: both sensors -> three columns (labels | Tipping | Piezo) */
#rain .icon.both { top: 40px; width: 80px; transform: scale(.85); transform-origin: 0 0; }
#rain .r3 { position: absolute; left: 84px; top: 4px; width: 390px; display: grid; grid-template-columns: 96px 1fr 1fr; align-items: baseline; column-gap: 8px; font-size: 17px; font-weight: 700; line-height: 19px; }
#rain .r3 .k { color: var(--fg-dim); white-space: nowrap; }
#rain .r3 .unit-h { color: var(--fg-faint); font-size: 15px; }
#rain .r3 .h { text-align: right; color: var(--fg-dim); font-size: 17px; white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 1.5px solid var(--line); }
#rain .r3 .v { text-align: right; white-space: nowrap; }
#rain .r3 .v i { font-style: normal; font-size: 13px; color: var(--fg-dim); margin-left: 1px; }
#rain .r3 .big { text-align: right; font-size: 32px; line-height: 38px; }


/* =====================================================================
   Portrait tablet: 800 x 1518, fitted to the screen
   ===================================================================== */
body[data-layout="portrait"] #stage { width: 800px; height: 1518px; }
body[data-layout="portrait"] #hdr { width: 800px; height: 98px; padding: 4px 14px 0; flex-wrap: wrap; align-content: flex-start; }
body[data-layout="portrait"] #hdr-l { height: 50px; }
body[data-layout="portrait"] #hdr-clock { margin-left: auto; line-height: 50px; }
body[data-layout="portrait"] #hdr-l { width: auto; gap: 10px; }
body[data-layout="portrait"] #hdr-left { gap: 10px; }
body[data-layout="portrait"] #hdr-title { order: 3; flex: none; width: 100%; font-size: 26px; padding: 0; line-height: 40px; }
body[data-layout="portrait"] #hdr-clock { font-size: 26px; }
body[data-layout="portrait"] #hdr-clock #time { min-width: 112px; margin-left: 16px; }
body[data-layout="portrait"] #rt-top { left: 16px; top: 102px; width: 768px; }
body[data-layout="portrait"] #g-out { left: 34px; top: 154px; }
body[data-layout="portrait"] #g-wind { left: 410px; top: 154px; }
body[data-layout="portrait"] #stats { left: 12px; top: 508px; width: 776px; }
body[data-layout="portrait"] #aq { left: 28px; top: 596px; width: 560px; }
body[data-layout="portrait"] #sky { left: 12px; top: 636px; }
body[data-layout="portrait"] #g-ch { left: 163px; top: 844px; }
body[data-layout="portrait"] #sep-h1 { left: 24px; top: 1124px; width: 752px; }
body[data-layout="portrait"] #rain { left: 163px; top: 1132px; }
body[data-layout="portrait"] #sep-h2 { left: 24px; top: 1322px; width: 752px; }
body[data-layout="portrait"] #baro { left: 163px; top: 1330px; }
body[data-layout="portrait"] #sep-v { display: none; }
body[data-layout="portrait"] #toolbar { width: 800px; }

/* =====================================================================
   Phone: 540 wide, one column, fitted to the screen width and scrolling
   ===================================================================== */
body[data-layout="phone"] #stage { width: 540px; height: 2062px; }
body[data-layout="phone"] #hdr { width: 540px; height: 140px; padding: 6px 14px 0; flex-wrap: wrap; align-content: flex-start; row-gap: 2px; }
body[data-layout="phone"] #hdr-l { width: 100%; height: 44px; justify-content: space-between; }
body[data-layout="phone"] #hdr-left { gap: 10px; }
body[data-layout="phone"] #hdr-title { flex: none; width: 100%; font-size: 26px; padding: 0 4px; line-height: 36px; }
body[data-layout="phone"] #hdr-leak { align-items: center; }
body[data-layout="phone"] #hdr-clock { width: 100%; text-align: center; font-size: 30px; }
body[data-layout="phone"] #hdr-clock #time { min-width: 0; margin-left: 18px; }
body[data-layout="phone"] #rt-top { left: 14px; top: 146px; width: 512px; height: 68px; font-size: 18px; }
body[data-layout="phone"] #g-out { left: 100px; top: 218px; }
body[data-layout="phone"] #g-wind { left: 90px; top: 566px; }
body[data-layout="phone"] #stats { left: 8px; top: 920px; width: 524px; height: 176px; grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
body[data-layout="phone"] #stats.tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-layout="phone"] #stats .k { font-size: 19px; }
body[data-layout="phone"] #stats .v { font-size: 30px; }
body[data-layout="phone"] #aq { left: 20px; top: 1106px; width: 500px; gap: 26px; }
body[data-layout="phone"] #sky { left: 0; top: 1160px; width: 540px; height: 226px; }
body[data-layout="phone"] #g-ch { left: 33px; top: 1396px; }
body[data-layout="phone"] #sep-h1 { left: 20px; top: 1676px; width: 500px; }
body[data-layout="phone"] #rain { left: 33px; top: 1684px; }
body[data-layout="phone"] #sep-h2 { left: 20px; top: 1874px; width: 500px; }
body[data-layout="phone"] #baro { left: 33px; top: 1882px; }
body[data-layout="phone"] #sep-v { display: none; }
body[data-layout="phone"] #toolbar { width: 540px; height: 58px; }
body[data-layout="phone"] #toolbar svg { width: 30px; height: 30px; }


/* =====================================================================
   Full-screen panels: charts, radar, sensors, settings.
   They sit outside the scaled dashboard and fill the real screen.
   ===================================================================== */
#overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 50; background: var(--bg); display: flex; }
#overlay[hidden] { display: none; }
#ov-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-grad); color: var(--fg); }
#ov-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 58px; padding: 0 8px 0 20px; background: var(--toolbar); color: var(--toolbar-fg); }
#ov-title { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ov-close { appearance: none; background: none; border: 0; color: inherit; font-size: 38px; line-height: 1;
  width: 54px; height: 54px; cursor: pointer; border-radius: 10px; }
#ov-close:active { background: rgba(255,255,255,.18); }
#ov-tabs { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 12px 4px; }
#ov-tabs[hidden] { display: none; }
/* Year tab: last 12 months or a calendar year */
#year-sel { font: inherit; font-size: 18px; font-weight: 700; color: var(--fg); background: var(--panel-bg);
  border: 2px solid var(--line); border-radius: 22px; padding: 6px 14px; margin-left: 4px; }
#year-sel[hidden] { display: none; }
#ov-tabs button { appearance: none; font: inherit; font-size: 18px; font-weight: 700; color: var(--fg-dim);
  background: none; border: 2px solid var(--line); border-radius: 22px; padding: 6px 20px; cursor: pointer; }
#ov-tabs button.on { color: #fff; background: var(--toolbar); border-color: var(--toolbar); }
#ov-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 28px; font-size: 19px; }
#ov-body > .wrap { max-width: 920px; margin: 0 auto; }
#ov-body table { width: 100%; border-collapse: collapse; }
#ov-body td, #ov-body th { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
#ov-body th { color: var(--fg-dim); font-weight: 700; }
#ov-body .opt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
#ov-body .seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; }
#ov-body .seg button { appearance: none; border: 0; background: none; color: var(--fg); font: inherit; font-size: 18px; padding: 7px 15px; cursor: pointer; }
#ov-body .seg button.on { background: var(--toolbar); color: #fff; }
#ov-body select { font: inherit; font-size: 18px; color: var(--fg); background: var(--panel-bg); border: 2px solid var(--line); border-radius: 8px; padding: 6px 10px; }
#ov-body .meta { color: var(--fg-dim); font-size: 16px; margin-top: 16px; line-height: 1.6; }
#ov-body.flush { padding: 0; overflow: hidden; }
.radar-frame { display: block; width: 100%; height: 100%; border: 0; background: #0a0e3a; }

/* charts */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; max-width: 1500px; margin: 0 auto; }
.chart { background: var(--panel-bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px 6px; position: relative; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-title { font-size: 19px; font-weight: 700; }
.chart-title .u { font-size: 15px; color: var(--fg-dim); font-weight: 500; margin-left: 6px; }
.chart-legend { display: flex; gap: 14px; font-size: 15px; color: var(--fg-dim); }
.chart-legend .tot-l { color: var(--fg-dim); font-style: italic; }
.chart-legend b { color: var(--fg); font-weight: 600; margin-left: 2px; }
.chart-hint { text-align: center; font-size: 14px; color: var(--fg-dim); margin: -4px 0 10px; }
.chart-tip .tt-diff { border-top: 1px solid var(--grid); margin-top: 3px; padding-top: 3px; color: var(--fg-dim); }
.chart-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.chart-tip { position: absolute; z-index: 5; display: none; pointer-events: none; min-width: 120px;
  background: var(--panel-bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 14px; line-height: 1.45; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.chart-tip .tt-when { font-weight: 600; color: var(--fg-dim); margin-bottom: 2px; }
.chart-tip .tt-row { display: flex; align-items: center; gap: 6px; }
.chart-tip .tt-row i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chart-tip .tt-row b { margin-left: auto; padding-left: 12px; font-size: 15px; }
.chart svg { width: 100%; height: auto; touch-action: pan-y; }
.chart-empty { color: var(--fg-dim); padding: 40px 0; text-align: center; }
@media (max-width: 600px) {
  #ov-body { padding: 12px 12px 24px; font-size: 18px; }
  #ov-body table.sensors td, #ov-body table.sensors th { padding: 8px 4px; }
  #ov-body table.sensors td:first-child { white-space: normal; }
  #ov-title { font-size: 20px; }
  #ov-tabs button { padding: 6px 14px; }
  .chart { padding: 8px 8px 4px; }
}

/* footer button with nothing to do (e.g. CH with a single channel) */
#toolbar button.off { opacity: .4; }
/* short messages */
#toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%) translateY(20px); z-index: 60;
  max-width: min(90vw, 560px); padding: 12px 18px; border-radius: 12px; background: var(--panel-bg); color: var(--fg);
  border: 1.5px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.35); font: 500 17px/1.35 "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* channel rings flash when the channel changes */
@keyframes chflash { from { opacity: .25; } to { opacity: 1; } }
#g-ch.flash { animation: chflash .45s ease-out; }

/* Arabic and Urdu: text in each label, row and panel takes the direction of its first
   letter, so mixed text ("المسافة: 12 km") reads correctly; the console layout is unchanged */
body.rtl-text #stage div, body.rtl-text #stage span, body.rtl-text #stage b,
body.rtl-text #overlay div, body.rtl-text #overlay span, body.rtl-text #overlay p,
body.rtl-text #overlay td, body.rtl-text #overlay th, body.rtl-text #toast { unicode-bidi: plaintext; }