/* The temperature chip and its panel (js/thermo.js, THERMO-1). Only the look variables every look already sets (--muted, --text,
   --line, --accent, --accent-text, --ts, --tint); no look file is touched. The chip sits beside the battery in the dock; the panel
   is a pop, like the clock's. A number is never alone: the source and the age are under it, "old" is a word, not a colour. */
#thermo-ind {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 6px; margin: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
#thermo-ind[hidden] { display: none; }
#thermo-ind:hover, #thermo-ind:focus-visible, #thermo-ind[aria-expanded="true"] { color: var(--text); }
.th-chip { display: inline-flex; align-items: center; gap: 4px; }
.th-icon { width: 12px; height: 18px; display: block; flex: none; }
.th-n { font-weight: 600; font-size: calc(13px * var(--ts, 1)); line-height: 1; white-space: nowrap; }
#thermo-ind[data-kind="old"] .th-n { font-style: italic; font-weight: 500; }

#thermo-pop {
  bottom: calc(var(--dock-h) + 8px); width: 320px; max-height: calc(100% - var(--dock-h) - 24px); overflow: auto;
  font-size: calc(14px * var(--ts, 1)); line-height: 1.4; color: var(--text);
}
#thermo-pop[hidden] { display: none; }
.th-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.th-close { min-width: 44px; min-height: 44px; font-size: 20px; line-height: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.th-close:hover, .th-close:focus-visible { color: var(--text); }
.th-cannot { margin: 0 0 8px; }
.th-cannot b { display: block; font-size: calc(16px * var(--ts, 1)); }
.th-reading { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--tint), .05); }
.th-num { font-size: calc(30px * var(--ts, 1)); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.th-oldtag { font-size: calc(14px * var(--ts, 1)); font-weight: 600; font-style: italic; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; vertical-align: middle; }
.th-is-old .th-num { opacity: .6; }
.th-src, .th-oldnote, .th-credit, .th-lead, .th-foot { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); overflow-wrap: anywhere; }
.th-oldnote { margin-top: 2px; }
.th-credit { margin-top: 2px; }
.th-block { margin: 0 0 10px; }
.th-est { padding-top: 8px; border-top: 1px solid var(--line); }
.th-est h4 { margin: 0 0 2px; font-size: calc(13px * var(--ts, 1)); font-weight: 600; }
.th-lead { margin: 0 0 6px; }
.th-ask { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: rgba(var(--tint), .05); border-radius: 0 8px 8px 0; }
.th-fail { margin: 0 0 8px; color: var(--text); }
.th-fail::before { content: "⚠ "; }
.th-row { display: flex; flex-wrap: wrap; gap: 8px; }
#thermo-pop .btn { width: auto; min-height: 44px; padding: 8px 14px; }
#thermo-pop .btn[disabled] { opacity: .55; cursor: default; }
.th-dev { padding-top: 8px; border-top: 1px solid var(--line); margin-bottom: 4px; }
.th-dev h4 { margin: 0 0 2px; font-size: calc(13px * var(--ts, 1)); font-weight: 600; }
.th-dev .th-lead { margin-bottom: 0; }
.th-devlink { display: block; min-height: 44px; padding: 0; text-align: left; border: 0; background: transparent; color: var(--accent-text, var(--text)); text-decoration: underline; font: inherit; cursor: pointer; }
.th-foot { margin: 6px 0 0; }
html[data-motion="reduce"] #thermo-pop { animation: none; }
@media (prefers-reduced-motion: reduce) { #thermo-pop { animation: none; } }

/* a phone: the panel takes the width, like the clock's, and sits over the dock */
@media (max-width: 760px) {
  #thermo-pop { left: 8px !important; right: 8px; width: auto; bottom: calc(var(--dock-h) + 6px); }
}