/* an entity's history (entity-history.js), shared by the box page and Sync Home */
.eh { display: grid; gap: 12px; min-width: 0 }
.eh-r { justify-self: start; max-width: 100%; overflow-x: auto }
.eh-g { display: grid; gap: 10px; min-width: 0 } .eh-g .chart { height: 180px }
.eh-wait, .eh-none { color: var(--muted, var(--hi3)); font-size: 14px; padding: 10px 2px }
.eh-tl { display: flex; height: 28px; border-radius: 9px; overflow: hidden; background: var(--inset, rgba(118, 118, 128, .13)) }
.eh-tl i { display: block; height: 100%; min-width: 1px }
.eh-tl .eh-on { background: var(--t, var(--ink, #1c1c1e)) } .eh-tl .eh-off { background: rgba(118, 118, 128, .28) }
.eh-tl .eh-nodata { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(118, 118, 128, .18) 4px 8px) }
.eh-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted, var(--hi3)); margin-top: -4px }
.eh-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2, var(--hi2)) }
.eh-k { display: inline-flex; align-items: center; gap: 6px } .eh-k i { width: 10px; height: 10px; border-radius: 3px; display: block }
.eh-k.eh-on i { background: var(--t, var(--ink, #1c1c1e)) } .eh-k.eh-off i { background: rgba(118, 118, 128, .4) }
.eh-p { font-weight: 400; color: var(--muted, var(--hi3)) }
.eh-a .group { margin: 0 } .eh-a .grow { min-height: 46px }
.eh-a .group { border-radius: 14px; overflow: hidden; background: var(--grp, var(--glass-strong)) }
.eh-a .grow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 7px 14px; border-top: 1px solid var(--hline, var(--line)) } .eh-a .grow:first-child { border-top: 0 }
.eh-a .gm { display: grid; min-width: 0 } .eh-a .gm b { font-weight: 500; font-size: 14.5px } .eh-a .gm small { color: var(--muted, var(--hi3)); font-size: 12.5px }
.chart svg { stroke: none } /* icon styles elsewhere stroke every svg: not the chart's frame and text */
.eh-a .gm small { font-weight: 400 } .eh-a .gm b { font-weight: 500 }
/* state colours for timelines, the same tones as Sync Home */
.eh-tone { --amber: #e8960a; --green: #2a9d4b; --blue: #1f7ae0; --orange: #e8741c; --teal: #12999a; --indigo: #5856d6; --cyan: #138fc2; --red: #b4392f }
:root[data-theme=dark] .eh-tone { --amber: #ffbd3d; --green: #3ec463; --blue: #4a9dff; --orange: #ff9a4a; --teal: #3fc6c6; --indigo: #8a87ff; --cyan: #4cc0ec; --red: #ee8a80 }
.eh-tone.t-amber { --t: var(--amber) } .eh-tone.t-green { --t: var(--green) } .eh-tone.t-blue { --t: var(--blue) } .eh-tone.t-orange { --t: var(--orange) }
.eh-tone.t-teal { --t: var(--teal) } .eh-tone.t-indigo { --t: var(--indigo) } .eh-tone.t-cyan { --t: var(--cyan) } .eh-tone.t-red { --t: var(--red) }
.eh-more { justify-self: center; display: block; margin: 8px auto 0; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--inset, rgba(118, 118, 128, .13)); color: var(--ink, var(--hi)); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.eh-a .gm b { color: var(--hi, var(--ink)) }