/* The blackbox page: the drop target, and the strip describing a loaded log.
   The chart, readout and chrome around them are base.css's. */

/* The whole view is the target, not just the box drawn in it: a file dropped
   anywhere on the page is a file meant for the page. The box is where to aim,
   which is a different question from where it will land. */
.drop {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: 0;
}

/* Where base.css turns the shell into an ordinary scrolling document, `flex`
   no longer gives this any height, and a target that is only as tall as its
   own box is a much smaller thing to aim at. */
@media (max-width: 820px), (max-height: 620px) {
  .drop {
    min-height: max(20rem, 60svh);
  }
}

.drop-inner {
  width: min(46ch, 100%);
  padding: 3rem 2rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  background: var(--panel);
}

/* Dragging over the page, not over the box, since that is what the drop
   actually tests. */
.drop.over .drop-inner {
  border-color: var(--accent);
  border-style: solid;
  background: var(--panel-2);
}

.drop-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.drop-or {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.drop-or button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.drop-or button:hover {
  border-color: var(--axis);
}

.drop-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.drop-note code {
  font: 0.85em var(--mono);
  color: var(--text);
}

/* Takes the place of the note rather than sitting under it, so the box does
   not change height between asking for a file and reading one. */
.drop-status {
  margin: 1rem 0 0;
  font: 0.78rem var(--mono);
  color: var(--text-dim);
}

.drop-status.error {
  color: var(--series-h);
}

/* The one button here that throws something away. */
.topbar #opt-clear-yes:hover {
  color: var(--text);
  border-color: var(--series-h);
}

/* --- a loaded log ------------------------------------------------------- */

.log-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.1rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font: 0.78rem var(--mono);
}

.log-head .name {
  color: var(--text);
  font-weight: 600;
}
.log-head .k {
  color: var(--text-dim);
}
.log-head .v {
  color: var(--text);
}

.topbar .opts select {
  font-size: 0.75rem;
}

/* --- the provisional curve strip ----------------------------------------- */

/* Three sliders and what they currently say, on one line above the two plots
   they drive. Narrower than the calculator's control rows because there is one
   curve here rather than eight, and it is being compared rather than authored. */
.prov {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.1rem;
  padding: 0.3rem 0.7rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.prov[hidden] {
  display: none;
}

.prov-fields {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem 1.1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.prov select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.25rem;
  font: inherit;
}

.prov-name {
  color: var(--series-d);
  font-weight: 600;
}

.prov label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.prov label > span {
  white-space: nowrap;
}

.prov input[type="range"] {
  --slot-color: var(--series-d);
  width: clamp(70px, 14vw, 170px);
}

.prov input[type="number"] {
  font: 0.75rem var(--mono);
  width: 3rem;
}

/* Rate parameters are shown at the scale a configurator prints them, so these
   hold "0.95" or "543" rather than the throttle strip's two or three digits. */
.prov-fields input[type="number"] {
  width: 4rem;
}

/* The comparison the strip exists to make, so it sits with the controls that
   move it rather than in the file's own header. */
.prov-read {
  margin-left: auto;
  font: 0.75rem var(--mono);
  color: var(--text-dim);
}

.prov-read .v {
  color: var(--text);
  font-weight: 600;
}
.prov-read .better {
  color: var(--series-e);
}
.prov-read .short {
  color: var(--series-h);
}

.prov button {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  font: 0.72rem var(--mono);
  cursor: pointer;
}

.prov button:hover {
  color: var(--text);
  border-color: var(--axis);
}

/* --- the log selection panel ---------------------------------------------- */

.log-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font: 500 0.75rem var(--mono);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
}

.log-toggle:hover {
  color: var(--text);
  background: var(--panel-2);
}

.log-panel {
  width: min(28rem, 92vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: 13px/1.45 var(--sans);
}

.log-panel::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.log-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.log-panel-head h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.log-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.log-panel-close:hover {
  color: var(--text);
}

.log-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font: 0.78rem var(--mono);
}

.log-panel-meta .k {
  color: var(--text-dim);
  margin-right: 0.4rem;
}
.log-panel-meta .v {
  color: var(--text);
  word-break: break-all;
}

.log-panel-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.log-panel-actions button {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.log-panel-actions button:hover {
  color: var(--text);
  border-color: var(--axis);
}

.log-panel-list {
  overflow-y: auto;
  max-height: 50vh;
}

.log-panel-rows {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
}

.log-group + .log-group {
  border-top: 1px solid var(--border);
}

.log-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0;
}

.log-group-label {
  font: 0.72rem var(--mono);
  color: var(--text-dim);
}

.log-group-actions {
  display: flex;
  gap: 0.3rem;
  flex: none;
}

.log-group-actions button {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  font-family: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.log-group-actions button:hover {
  color: var(--text);
  border-color: var(--axis);
}

.log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0.85rem;
  font: 0.8rem var(--mono);
}

.log-row:hover {
  background: var(--panel-2);
}

/* Nothing to select in an invalid log, so it is dimmed rather than given the
   same hover a pickable row gets. */
.log-row.invalid {
  color: var(--text-dim);
}
.log-row.invalid:hover {
  background: none;
}

.log-row-err {
  font-size: 0.72rem;
  color: var(--series-h);
  white-space: nowrap;
}

/* Stands in for the whole chart when the selection can't be drawn: centred
   over the same space the canvas occupies, .chart-wrap already being the
   positioned ancestor. */
.bb-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font: 13px/1.5 var(--sans);
  color: var(--text-dim);
}

/* base.css gives both an unconditional `display`, which otherwise outranks
   the browser's default `[hidden]` rule at equal specificity - these two
   selectors just need to win that tie. */
#bb-canvas[hidden],
#bb-readout[hidden],
#bb-blocked[hidden] {
  display: none;
}

/* Two plots stacked share the height the one had; on the small-screen layout
   base.css gives each a definite height instead, so they simply follow on. */
@media (max-width: 820px), (max-height: 620px) {
  #bb-wrap2 {
    height: max(240px, 45vh);
    min-height: 240px;
  }
}

/* Tables rather than a list, so it is wider than the log picker and scrolls
   as a body instead of as a list inside a frame. */
.summary-panel {
  width: min(42rem, 94vw);
}

.summary-body {
  padding: 0.85rem;
  overflow-y: auto;
  max-height: 70vh;
}

.summary-body p {
  margin: 0 0 0.7rem;
}

/* Dimmer than the table: these say how to read the numbers above them, and
   should not compete with what those numbers say. */
.summary-note {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.5rem;
  font: 0.78rem var(--mono);
}

.summary-table th,
.summary-table td {
  padding: 0.25rem 0.4rem;
  text-align: right;
  white-space: nowrap;
}

.summary-table thead th,
.summary-table thead td {
  color: var(--text-dim);
  font-weight: 400;
  border-bottom: 1px solid var(--border);
}

/* The row labels and the heading over them, against the numbers they name.
   Right-aligned, the heading drifts across its column to sit next to the one
   after it, reading as that column's second line. */
.summary-table tbody th,
.summary-table thead th:first-child {
  text-align: left;
  font-weight: 400;
}

/* Numbers are the point, so a table scrolls on its own before anything else
   has to give up width. Nowrap cells make a wide one wider than the panel, and
   a clipped last column is the one failure that looks like working. */
.summary-scroll {
  overflow-x: auto;
}

/* The facts that are not per-axis, in the strip's own key-value form but
   stacked: one per line reads as a list of readings, where the strip's row
   reads as a caption. */
.summary-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.85rem;
  font: 0.78rem var(--mono);
}

.summary-lines .k {
  display: inline-block;
  min-width: 7.5rem;
  color: var(--text-dim);
}

.summary-lines .v {
  color: var(--text);
}