/* Gas Tracker on live data (inc/live/tools.php, assets/js/p/tool-gas.js) */

/* congestion level: Quiet keeps the design's green, Normal orange, Busy red */
html main [data-wc-lvl="n"] { color: rgb(255, 159, 10); }
html main [data-wc-lvl="b"] { color: rgb(255, 69, 58); }
html[data-theme=light] main [data-wc-lvl="n"] { color: rgb(201, 52, 0); }
html[data-theme=light] main [data-wc-lvl="b"] { color: rgb(215, 0, 21); }
html main [data-wc-bar][data-wc-lvl="n"] { background: rgb(255, 159, 10); }
html main [data-wc-bar][data-wc-lvl="b"] { background: rgb(255, 69, 58); }
html[data-theme=light] main [data-wc-bar][data-wc-lvl="n"] { background: rgb(201, 52, 0); }
html[data-theme=light] main [data-wc-bar][data-wc-lvl="b"] { background: rgb(215, 0, 21); }

/* cheapest time to transact: each hour's colour from its average gas (green cheap … orange dear), ring on the cheapest */
html main [data-wc-hr="1"], html main [data-wc-hr="best"] { background: var(--wc-hb); box-shadow: none; }
html[data-theme=light] main [data-wc-hr="1"], html[data-theme=light] main [data-wc-hr="best"] { background: var(--wc-hl); }
html main [data-wc-hr="best"] { box-shadow: rgb(48, 209, 88) 0 0 0 2px inset; }
html[data-theme=light] main [data-wc-hr="best"] { box-shadow: rgb(36, 138, 61) 0 0 0 2px inset; }
html main [data-wc-hr="0"] { background: rgba(120, 120, 128, 0.16); box-shadow: none; }

/* history chart hover, as the design draws it: line, dot on the curve, card with the hour, gas and transfer cost */
html main .wc-tlh-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.24); pointer-events: none; }
html main .wc-tlh-d { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgb(41, 151, 255); box-shadow: rgba(255, 255, 255, 0.14) 0 0 0 4px; pointer-events: none; }
html main .wc-tlh-t { position: absolute; z-index: 3; top: 4px; min-width: 176px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgb(245, 245, 247); color: rgb(29, 29, 31); box-shadow: rgba(0, 0, 0, 0.45) 0 12px 32px; pointer-events: none; text-align: left; }
html main .wc-tlh-h { font-size: 12px; font-weight: 600; color: rgb(110, 110, 115); white-space: nowrap; }
html main .wc-tlh-r { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-size: 13px; white-space: nowrap; }
html main .wc-tlh-l { color: rgb(110, 110, 115); }
html main .wc-tlh-n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgb(29, 29, 31); }
html[data-theme=light] main .wc-tlh-v { background: rgba(0, 0, 0, 0.24); }
html[data-theme=light] main .wc-tlh-d { background: rgb(0, 113, 227); box-shadow: rgba(0, 0, 0, 0.14) 0 0 0 4px; }
html[data-theme=light] main .wc-tlh-t { background: rgb(29, 29, 31); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0 12px 32px; }
html[data-theme=light] main .wc-tlh-h, html[data-theme=light] main .wc-tlh-l { color: rgb(134, 134, 139); }
html[data-theme=light] main .wc-tlh-n { color: rgb(255, 255, 255); }

/* a reading older than 30 minutes (the scheduler stopped): its time is shown in orange with "delayed" */
html main [data-wc-old="1"] { color: rgb(255, 159, 10); }
html[data-theme=light] main [data-wc-old="1"] { color: rgb(201, 52, 0); }
/* the delayed line is longer than the live one: it may wrap on phones, and its dot turns orange too */
html main span:has(> [data-wc-g="upd"][data-wc-old="1"]) { white-space: normal; min-width: 0; }
html main span:has(> [data-wc-g="upd"][data-wc-old="1"]) > span[aria-hidden="true"] { flex: none; background: rgb(255, 159, 10); box-shadow: none; animation: none; }
html[data-theme=light] main span:has(> [data-wc-g="upd"][data-wc-old="1"]) > span[aria-hidden="true"] { background: rgb(201, 52, 0); }