/* ===========================================================================
   SI Energy Timer — shared PWA styles (index.html + history.html).
   Dark, phone-first: fills the screen in standalone mode, legible in portrait
   and landscape. No horizontal scroll; chart/heatmap scale to available space.
   =========================================================================== */
:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b1020; color: #e5e7eb;
  padding: clamp(6px, 1.5vw, 14px);
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 { font-size: clamp(15px, 3vw, 24px); font-weight: 600; line-height: 1.2; min-width: 0; }
/* long title on wide screens, short one on phones — no clipping either way */
h1 .t-short { display: none; }
h1 .t-long  { display: inline; }
@media (max-width: 560px) {
  h1 .t-short { display: inline; }
  h1 .t-long  { display: none; }
}
.navlink { font-size: 60%; color: #64b5f6; text-decoration: none; }
.navlink:hover { text-decoration: underline; }

#meta { font-size: clamp(9px, 1.7vw, 13px); color: #9aa0ab; margin-top: 3px; }

/* Chart fills remaining vertical space — key for portrait phones. */
#chart { flex: 1; min-height: 180px; margin-top: clamp(4px, 1vw, 8px); position: relative; }
.chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa0ab; }
svg { width: 100%; height: 100%; display: block; }
.bar-label   { font-size: 11px; fill: #111; font-weight: 700; text-anchor: middle; }
.hour-label  { font-size: 11px; fill: #bbb; text-anchor: middle; }
.day-label   { font-size: 13px; fill: #ddd; font-weight: 600; text-anchor: start; }
.hot-bar { animation: ogmpulse 1s ease-in-out infinite; }
@keyframes ogmpulse {
  0%,100% { stroke:#ff2b2b; stroke-width:5; filter:drop-shadow(0 0 7px #ff3b30); }
  50%     { stroke:#ff8a80; stroke-width:3; filter:drop-shadow(0 0 2px #ff3b30); }
}

/* Compact single-row scrollable legend. */
#legend { display: flex; gap: clamp(8px, 2vw, 16px); font-size: clamp(9px, 1.7vw, 12px); color: #aaa;
  margin-top: clamp(3px, 1vw, 6px); overflow-x: auto; white-space: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
#legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }

/* History heatmap grid. */
#grid { margin-top: 8px; font-size: 11px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#grid table { border-collapse: collapse; width: 100%; table-layout: fixed; }
#grid th, #grid td { padding: 0; overflow: hidden; }
#grid th { color: #888; font-weight: 400; font-size: 9px; }
/* narrow fixed day/avg columns so the 24 hour cells always fit the viewport */
#grid td.day     { width: 30px; font-size: 9px; }
#grid td.day-avg { width: 30px; }
.cell { height: clamp(14px, 2.5vh, 24px); min-height: 16px; border-radius: 3px; margin: 1px;
  display: flex; align-items: center; justify-content: center; color: #111; font-weight: 700; font-size: 9px; overflow: hidden; }
.cell.sel { outline: 3px solid #fff; outline-offset: -2px; }
.day { color: #bbb; white-space: nowrap; text-align: right; padding-right: 5px; font-size: 9px; }
.day.today { color: #fff; font-weight: 700; }
.day-avg { color: #9aa0ab; text-align: left; padding-left: 5px; font-size: 9px; white-space: nowrap; }
.scroll-sentinel { height: 1px; }

/* Tooltip. */
#tip { position: fixed; background: #2a2a2a; border: 1px solid #666; padding: 8px 12px;
  border-radius: 6px; font-size: 13px; display: none; pointer-events: none; z-index: 20; line-height: 1.5; }
#tip .t-h { font-weight: 700; margin-bottom: 2px; }
#tip .t-row { display: flex; justify-content: space-between; gap: 18px; }
#tip .t-row span:first-child { color: #999; }
#tip .t-total { border-top: 1px solid #555; margin-top: 3px; padding-top: 3px; font-weight: 700; }

/* Gear menu — fixed, top-right, never disturbs the chart. */
#gear { position: fixed; top: clamp(8px, 2vh, 14px); right: clamp(8px, 2vw, 14px); z-index: 30;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #334155;
  background: #1e293bcc; color: #e5e7eb; font-size: 18px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(4px); }
#gear:hover { background: #334155cc; }
.menu-panel { position: fixed; top: 52px; right: clamp(8px, 2vw, 14px); z-index: 31;
  background: #1e293bee; border: 1px solid #334155; border-radius: 10px; padding: 6px; min-width: 150px;
  box-shadow: 0 12px 30px #000a; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: none; color: #e5e7eb;
  padding: 10px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: #334155; }
.menu-item[href] { display: block; }

/* Overlay panels (bottom-sheet-ish). */
.overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-height: 70vh; overflow-y: auto; background: #111827; border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-top: 1px solid #334155; box-shadow: 0 -12px 30px #000a; padding: 14px; }
.overlay-card { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; }
.overlay-head { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.overlay-head button, #cfgClose, #aboutClose { background: none; border: none; color: #9aa0ab; font-size: 24px; cursor: pointer; line-height: 1; }
.overlay label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #cbd5e1; }
.overlay input { padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; background: #0b1020; color: #e5e7eb; font-size: 15px; }
.overlay .primary { padding: 10px 14px; border-radius: 8px; border: none; background: #2563eb; color: #fff; font-size: 15px; cursor: pointer; }
.loading2 { color: #9aa0ab; font-size: 13px; line-height: 1.5; }