/* Room values over time. One view — the building itself — in the viewer's own
   panes and floating panels, so the two pages read as one tool. */

/* The value on each solid, and the room it belongs to. Seen from the top this
   is the whole label a plan would carry. */
.tag.value-tag {
  background: rgba(31, 41, 51, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* A `display` on a class beats the browser's own `[hidden] { display: none }`,
   so giving these a flex layout quietly un-hid every one of them: a room with
   no reading kept showing whatever it last reported, on a grey fill. */
.tag.value-tag[hidden] { display: none; }
.tag.value-tag b { font-size: 12px; font-weight: 700; }
.tag.value-tag small { font-size: 9.5px; opacity: .8; }

/* A zone's reading, over the middle of the rooms it covers. The rooms under it
   are lit and silent, so this is the only number on that patch of the map —
   outlined so it reads as a label for the set rather than for whichever room it
   happens to float over. */
.tag.value-tag.zone-tag {
  background: rgba(31, 41, 51, .9);
  outline: 2px solid rgba(255, 255, 255, .75);
}
.tag.value-tag.zone-tag small { opacity: .95; letter-spacing: .03em; }

/* Which floor is which, standing off the edge of it. Larger than a reading and
   lighter than one: it names the slab rather than saying anything about it, so
   it should be findable at a glance and never read first. */
.tag.storey-tag {
  background: none;
  box-shadow: none;
  color: var(--muted, #5c6b73);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .85), 0 0 1px rgba(255, 255, 255, .9);
}

/* Views share the width evenly, so two of them are a comparison rather than a
   big one and a strip. */
.split .pane { flex: 1; min-width: 0; }

/* The colours this view is on. Per view, because the choice is about the
   measure and each view is showing a different one. */
.v-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}
.v-controls .field { font-size: 11px; }
.v-controls select { max-width: 210px; }

/* "+" duplicates this view; the close is only offered when there is another
   view to fall back to. */
.pane-title .v-add { font-weight: 700; padding: 2px 9px; }
.pane-title .v-close { margin-left: 4px; }
.pane-title .v-name { font-size: 13px; }

/* Seen from the top the model is a floor plan, and a plan is not something you
   orbit — the cursor should not offer to. */
.scene.flat canvas { cursor: default; }

/* Which datapoints are mapped: floating over the model, like the viewer's
   own panels. */
.pick-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 330px;
  height: 420px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  min-width: 220px;
  min-height: 90px;
  overflow: auto;
  resize: both;
  padding: 0 12px 12px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .13);
  font-size: 12px;
}

.picker h4 {
  margin: 10px 0 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
/* --------------------------------------------------------------- the report

   What is odd about the building, from the readings already loaded. A panel
   rather than a page: it is read beside the maps that raised the question, and
   pressing a finding's id should not mean losing the view it came from. */
.report-panel {
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 36px));
  max-height: min(70vh, 720px);
  overflow: auto;
  padding: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(31, 41, 51, .18);
  resize: both;
}

/* The title bar is the handle. Said in the cursor, because a panel with
   somewhere to grab it is only useful if that shows. */
#reportGrip { cursor: move; }

.report { display: flex; flex-direction: column; gap: 2px; }

/* One finding: what it is, why it is being said, what it is about, and the
   shape of the series it came from. The sentence carries the number, so none of
   the rest is load-bearing on its own. */
.finding {
  display: grid;
  grid-template-columns: 10px 1fr auto 120px;
  align-items: start;
  gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid var(--line);
}
.finding:first-child { border-top: 0; }

.finding-text { min-width: 0; }
.finding-what { margin: 0; font-size: 12.5px; }
/* Why it is being said, and against what. Quieter, because it is the argument
   rather than the claim — but present, because a finding nobody can check is
   one they have to either believe or ignore. */
.finding-why {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
/* The apartment and the floor. Between the claim and its argument, because it
   is neither: it is what somebody needs before they can go and look. */
.finding-where {
  margin: 2px 0 0;
  color: #52514e;
  font-size: 11px;
  font-weight: 600;
}

.finding-id {
  align-self: center;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-style: normal;
  white-space: nowrap;
}

/* A dot per kind, and a colour that means the same thing everywhere it is used.
   Never the only thing carrying the kind: the dot has a title, and the sentence
   says what happened in words. */
.finding-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--muted);
}
.finding-silent .finding-dot,
.finding-stuck .finding-dot { background: #b13f3c; }
.finding-gaps .finding-dot { background: #c77c1c; }
.finding-setpoint .finding-dot { background: #d75853; }
.finding-saturated .finding-dot { background: #c77c1c; }
.finding-outlier .finding-dot,
.finding-baseline .finding-dot { background: #2f6feb; }

/* The series in the width of a word. Scaled to itself, because the shape is
   what a sparkline is for and the level is in the sentence. */
.spark {
  width: 120px;
  height: 26px;
  align-self: center;
  overflow: visible;
}
.spark polyline { fill: none; stroke: #6f7a86; stroke-width: 1.2; }
.spark-stuck polyline, .spark-silent polyline, .spark-setpoint polyline { stroke: #b13f3c; }
.spark-gaps polyline, .spark-saturated polyline { stroke: #c77c1c; }
.spark-outlier polyline, .spark-baseline polyline { stroke: #2f6feb; }

/* What was not looked at. Set apart from the findings, because it is the
   opposite of one: the difference between "nothing is wrong" and "nothing was
   checked". */
.report-caveat {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* ------------------------------------------------ datapoints worked out

   Two readings, one number: the deviation from a setpoint, the difference
   across a coil, the gain between two rooms. Folded away, because it is a thing
   to do occasionally and the ticks are what the panel is for. */
.make { margin: 6px 0 2px; font-size: 11.5px; }
.make > summary { color: var(--muted); cursor: pointer; }
.make-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
}
/* The two datapoints take what room there is; the operator and the button take
   what they need. A select at its content width is unreadable at these
   lengths — a room, a signal and a unit — so they are given a floor and
   allowed to shrink. */
.make-form select:first-child, .make-form select:nth-child(3) { flex: 1 1 44%; min-width: 0; }
.make-form .v-make-op { flex: 0 0 auto; width: 3.2em; text-align: center; }
.make-form input { flex: 1 1 100%; }

/* A worked-out datapoint in the list. Marked, because it is not a reading and
   somebody looking at a number ought to know which of the two it is. */
.picker .pick.made small {
  color: var(--muted);
  font-size: 10.5px;
}
.picker .pick.made > span { font-weight: 600; }
.made-drop {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.made-drop:hover { color: #b13f3c; }

/* A zone heading in the datapoint list. Darker than the room headings it sits
   above, because a zone is several of them and the difference is the point. */
.picker h4.pick-zone { color: #2f3a46; }
.picker h4.pick-zone small { margin-left: 6px; font-weight: 400; color: var(--muted); }

/* The zone a room belongs to, beside the room's own heading. Quieter than the
   number it follows: the room is what these readings are of, the zone is what
   it is part of. */
.picker h4 small.in-zone { margin-left: 6px; font-weight: 400; color: var(--muted); }

.picker .pick {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.picker .pick input { accent-color: var(--accent); }
.picker .pick small { color: var(--muted); font-size: 10.5px; }
.picker .pick em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A sensor placed somewhere other than the room NEST documents it against. */
.picker .pick small.moved {
  color: #8a4b00;
  background: #fff5ef;
  border-radius: 3px;
  padding: 0 4px;
}

.pick-actions { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }

/* Where one reading is drawn: in its room's colour, or in a column of its own.
   One control with two positions, because it cannot be both. */
.picker .pick .per-one {
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font: inherit;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.picker .pick .per-one[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pick-actions button { padding: 2px 10px; font-size: 11px; }
.pick-warn { font-size: 10.5px; color: #8c1d18; }

/* The key and the numbers, floating over the model on the other side. */
/* Wider than the other two and lower down, because it is a table rather than a
   list: five columns and a drawing need the room, and it opens under the panels
   already in the corners rather than on top of them. */
.hist-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 660px;
  height: 320px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  min-width: 300px;
  min-height: 120px;
  overflow: auto;
  resize: both;
  padding: 0 12px 12px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .13);
}

.hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hist-table th {
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding: 0 8px 5px 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .97);
}
.hist-table th { padding: 0 8px 0 0; }
/* The heading is the control. A column you can order by is not something to be
   told about in a hint somewhere; it is something to press. */
.hist-table th .sorter {
  border: 0;
  background: none;
  padding: 0 0 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.hist-table th .sorter:hover { color: var(--accent); }
.hist-table th[aria-sort='ascending'] .sorter,
.hist-table th[aria-sort='descending'] .sorter { color: var(--ink); }
.hist-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.hist-table tr + tr td { border-top: 1px solid var(--hair, rgba(31, 41, 51, .07)); }
.hist-table td.id, .hist-table th.id { font-variant-numeric: tabular-nums; color: var(--muted); }
.hist-table td.unit, .hist-table th.unit { text-align: right; padding-right: 0; white-space: nowrap; }
.hist-table td.room, .hist-table th.room { font-variant-numeric: tabular-nums; }
/* What it is bound to, and where NEST thinks it is: under the room rather than
   beside it, so the column stays a column of room numbers to scan down. */
.hist-table td.room small { display: block; font-size: 10.5px; color: var(--muted); }
/* The same amber the picker uses for it, so a moved sensor reads the same
   way wherever it is seen. */
.hist-table td.room small.moved { color: #8a4b00; }
/* The column the row exists for, and the one that grows: a share of the panel
   rather than a fixed width, so dragging the corner gives the room to the
   drawing instead of to a column of room numbers. */
.hist-table td.graph, .hist-table th.graph { width: 46%; min-width: 190px; padding-right: 12px; }

/* What ECharts draws into. The height is set on it as the panel is sized, so a
   bigger panel is a bigger graph rather than a longer flat smear. */
.spark {
  display: block;
  width: 100%;
  height: 38px;
  background: rgba(31, 41, 51, .03);
  border-radius: 3px;
}

.legend-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 260px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  min-width: 190px;
  min-height: 80px;
  overflow: auto;
  resize: both;
  padding: 0 12px 12px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .13);
}

.legend-title { font-size: 12px; font-weight: 700; margin-bottom: 5px; }
/* Seven blocks, because the scale has seven steps: a continuous bar would
   suggest a precision the fill does not have. */
.legend-row { display: flex; height: 14px; border-radius: 3px; overflow: hidden; }
.legend-cell { flex: 1; }
.legend-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.legend-note { margin-top: 5px; font-size: 10.5px; line-height: 1.4; color: var(--muted); }

/* One block per measure. Ruled off from each other because two strips running
   together read as one scale in two halves, which is the opposite of what they
   are: separate measures that happen to be in the same view. */
.legend-block + .legend-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.legend-unit { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.legend-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.legend-tools select { font-size: 11px; padding: 2px 4px; max-width: 148px; }
.legend-tools .toggle { font-size: 11px; }

/* The relief the pale end of the scale obliges: the numbers are readable
   whether or not the colour is. */
.value-table { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.value-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.value-table td { padding: 3px 0; }
.value-table td.sw { width: 20px; }
.value-table td.sw span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(11, 11, 11, .15);
}
.value-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: #52514e; }
.value-table .empty { color: var(--muted); font-style: italic; font-size: 12px; }

/* A room with nothing to report still says which room it is — quietly, because
   the rooms that do have a reading are the ones to read first. */
.tag.value-tag.quiet {
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  box-shadow: none;
  font-size: 10px;
  padding: 1px 5px;
}
.tag.value-tag.quiet b { display: none; }

/* One clock, under the one view it drives. */
/* Beside the button it belongs to, and quiet: it is read at a glance to see
   whether the numbers are still moving, not studied. */
.auto-at {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 2px;
}

/* A number is enough of a control here; the label above it says what of. */
.field.narrow { max-width: 90px; }
.field.narrow input { width: 100%; }

.scrubber {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.scrubber input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
  display: block;
  /* A thicker target than the default hairline: this is dragged more than
     anything else on the page. */
  height: 20px;
  cursor: pointer;
}

/* The track, with the moment above it and the landmarks and period beneath. */
.scrub { position: relative; flex: 1; min-width: 0; padding-top: 20px; }

/* One moment at a time, for when the thumb is too coarse to land on one. Kept
   together and next to Play, because they are the same clock. */
.step-pair { display: flex; gap: 4px; }
.scrubber button.step {
  padding: 5px 9px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

/* Landmarks. Each is a button: the obvious thing to do with a day written under
   a track is to press it. */
.scrub-ticks { position: relative; height: 15px; margin-top: 1px; }
.scrub-ticks .tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  border: 0;
  background: none;
  padding: 4px 3px 0;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
/* The mark itself, above the words: the label says which moment, this says
   exactly where on the track it is. */
.scrub-ticks .tick::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--line);
}
.scrub-ticks .tick:hover { color: var(--accent); }
.scrub-ticks .tick:hover::before { background: var(--accent); }

/* Rides the thumb. Translated by half its own width so it is centred on the
   position rather than starting at it. */
.scrub-bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Where the period starts and ends: a week and ninety days are the same track
   until something says which. */
.scrub-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.scrubber button { padding: 5px 16px; }
.scrubber button[aria-pressed='true'] { background: var(--accent); color: #fff; border-color: var(--accent); }
/* The readout, which is also the way in: type or pick a moment and the clock
   goes there. Styled to sit as quietly as the text it replaced — it is read far
   more often than it is used. */
.stamp {
  min-width: 190px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
}
.stamp:hover { border-color: var(--line); }
.stamp:focus { border-color: var(--accent); outline: none; background: #fff; }

/* The pane is the positioning context for the floating panels. */
.split .pane { position: relative; }

/* "Every room at once" above, the rooms themselves below. */
.picker h4.pick-section {
  margin: 12px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: #52514e;
}
.picker h4.pick-section:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }

/* A group tick stands for every room that has that datapoint, so it carries a
   little more weight than the rows underneath it. */
.picker .pick.group { font-weight: 600; padding: 3px 0; }
.picker .pick.group em { font-weight: 400; }

/* The title bar of a floating panel: what it is, and where to grab it.
   Sticky, so scrolling a long datapoint list does not scroll away the only
   thing that can move the panel off what it is covering. */
.panel-grip {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -12px 4px;
  padding: 8px 12px 6px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.panel-grip h3 { margin: 0; font-size: 12px; }

/* The legend's own title moved into the grip above it. */
.legend-panel .legend-row { margin-top: 2px; }

/* ------------------------------------------------------------- the views */

/* Positioned rather than laid out, because a view can be dragged out of the
   tiling and left where it was put. */
.split#views {
  display: block;
  position: relative;
  padding: 0;
  min-height: 0;
}

.split#views .pane {
  position: absolute;
  min-width: 280px;
  min-height: 200px;
  resize: both;
  box-shadow: 0 2px 10px rgba(31, 41, 51, .08);
}

/* The title bar is the handle. Buttons and fields inside it keep their own
   cursor, since a drag that starts on one of those is not a drag. */
.split#views .pane-title { cursor: move; user-select: none; touch-action: none; }
.split#views .pane-title button,
.split#views .pane-title select,
.split#views .pane-title input,
.split#views .pane-title label { cursor: default; }
/* A disclosure in the bar is something to press, not somewhere to grab. */
.split#views .pane-title summary { cursor: pointer; }

/* -------------------------------------------------- what to draw around them */

/* The panel hangs off the bottom of the toolbar, so the bar is what it is
   positioned against. */
.topbar { position: relative; }

/* Under the toolbar rather than over a view: the views are the page, and a
   panel covering one of them covers the thing being compared. */
.element-panel {
  position: absolute;
  top: 100%;
  left: 12px;
  z-index: 40;
  width: 280px;
  max-height: 70vh;
  overflow: auto;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 41, 51, .18);
  font-size: 12px;
}

.element-head { display: flex; align-items: center; gap: 8px; }
.element-head h2 { margin: 0; font-size: 13px; }
.element-head .close {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 15px;
  background: transparent;
  color: var(--muted);
}

.element-note { margin: 6px 0 0; color: var(--muted); line-height: 1.4; }
.element-list { margin-top: 8px; }

.element-group {
  margin: 9px 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.element-group:first-child { margin-top: 2px; }

.element-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 2px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.35;
}
.element-row:hover { background: #f2f5f9; }
.element-row input { accent-color: var(--accent); cursor: pointer; flex: none; }
.element-row[data-busy='true'] { opacity: .5; }

.element-name { flex: 1; min-width: 0; }
.element-name small {
  display: block;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
}
.element-count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }

.element-actions { display: flex; gap: 6px; margin-top: 9px; }
.element-actions button { flex: 1; }

/* A measure's heading in the table, when a view holds more than one. The one
   the map is not showing says so, since a row with no swatch beside it
   otherwise looks like one whose colour failed rather than one that was never
   coloured. */
.table-unit {
  margin: 10px 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.table-unit:first-child { margin-top: 0; }

/* Choosing which floors to look at: a disclosure with a box each, because
   picking two of seven in a <select multiple> means knowing to hold ctrl. */
.drop { position: relative; font-size: 12px; }
.drop > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  white-space: nowrap;
}
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after { content: ' ▾'; color: var(--muted); }
.drop[open] > summary { border-color: var(--accent); }
.drop-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  max-height: 300px;
  overflow: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .16);
}
.drop-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 5px;
  cursor: pointer;
}
.drop-row:hover { background: rgba(47, 111, 235, .08); }
/* The height, quietly: it tells two floors of one name apart and is not what
   anybody is reading. */
.drop-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.drop-all {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}
.drop-all:disabled { opacity: .45; cursor: default; }

/* How big the thing a reading is of. Right-aligned, because a column of
   numbers is read down its digits. */
.hist td.area { text-align: right; white-space: nowrap; color: var(--ink); }
.hist td.area small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
}

/* The three floating panels, in the order they are wanted when they overlap.
   The history is the one being read while the others are being adjusted, so it
   sits on top of both; stacking by document order alone left that to the
   accident of which was written last. */
.pick-panel { z-index: 2; }
.legend-panel { z-index: 3; }
.hist-panel { z-index: 4; }

/* A reading taken for a zone says the zone, with the room it physically sits
   in under it. */
.hist td.room.zoned { font-weight: 600; }
.hist td.room.zoned small { font-weight: 400; color: var(--muted); }