/* Electric circuits page. Shared pieces come from styles.css (header,
   panels, property rows, readout numbers) and fields.css (.fl-top, the
   toolbar and its view buttons, .fl-hint, .fl-form, .fl-check, .fl-note). */
.circuit-lab {
  --positive: #c2503c;
  --negative: #3f76aa;
  --current: #b4530a;
  --electron: #3f76aa;
  --dot: #ff7a00;
  --dot-electron: #00a3ff;
  --voltage: #2f7d4f;
  --danger: #a5544a;
}
:root[data-theme="dark"] .circuit-lab {
  --positive: #e9826e;
  --negative: #6fa8ec;
  --current: #f2c14e;
  --electron: #6fa8ec;
  --dot: #ff4d2e;
  --dot-electron: #1f8bff;
  --voltage: #8fd3a4;
  --danger: #e08a7e;
}
/* The row across the top reaches down the page so that the right-hand
   column can scroll inside it. Only its children take pointer input. */
.cl-top {
  bottom: 50px;
}
.cl-top > .fl-centre {
  pointer-events: none;
}
#mode-dc[aria-pressed="true"] {
  color: var(--current);
}
.glyph-thick {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}
/* Display, selected component, meters and graphs, in one column. */
.cl-side {
  flex: 0 0 292px;
  width: 292px;
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-side > * {
  flex: none;
}
.cl-panel {
  padding: 6px 10px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
}
.cl-panel > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 2px 0;
}
.cl-panel > summary small {
  font-weight: 400;
  opacity: 0.7;
}
.cl-indent {
  margin-left: 21px;
}
.cl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}
.electron-flow .cl-dot {
  background: var(--dot-electron);
}
.cl-ramp {
  flex: 0 0 44px;
  height: 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(to right, var(--negative), var(--positive));
}
/* The selected-component panel sits in the column, not over the scene. */
.circuit-lab #selection {
  position: static;
  width: auto;
  max-width: none;
  min-width: 0;
  zoom: 1;
  padding: 6px 10px 8px;
}
.circuit-lab #selection[hidden] {
  display: none;
}
.selection-header #rotate .ui-icon {
  width: 18px;
  height: 18px;
}
.cl-panel .fl-form .prop-row {
  grid-template-columns: 7.4em minmax(40px, 1fr) auto;
}
.cl-panel .fl-form input[type="number"] {
  width: 68px;
}
.cl-panel .fl-form select {
  padding: 2px;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.cl-panel .fl-form .unit {
  min-width: 2.2em;
}
.cl-panel .fl-form button {
  padding: 4px 10px;
  font-size: 11px;
}
.cl-panel .fl-form:empty {
  display: none;
}
/* Name, value: one reading to a row. */
.cl-readings {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 10.5px;
  align-items: baseline;
}
.cl-readings:empty {
  display: none;
}
#selection .cl-readings {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.cl-readings > span:nth-child(odd) {
  opacity: 0.75;
}
.cl-readings .heading {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-weight: 600;
  opacity: 1;
}
.cl-graph {
  display: block;
  width: 100%;
  height: 84px;
  margin-top: 4px;
}
.cl-phasors {
  display: block;
  width: 100%;
  height: 170px;
  margin-top: 4px;
}
#mode-ac[aria-pressed="true"] {
  color: var(--voltage);
}
.cl-panel[hidden] {
  display: none;
}
.cl-panel .fl-note {
  margin: 6px 0 0;
}
/* A short circuit is said loudly; lesser remarks quietly. */
.cl-warning,
.cl-note {
  max-width: min(100%, 620px);
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.45;
}
.cl-warning {
  background: #a5544a;
  border: 1px solid #8e463d;
  color: white;
  box-shadow: 0 8px 30px #6b2a2330;
}
.cl-warning strong {
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cl-warning[hidden],
.cl-note[hidden] {
  display: none;
}
.cl-note {
  background: var(--panel);
  border: 1px solid var(--line);
  opacity: 0.95;
}
#warp {
  height: 30px;
  width: 122px;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 11px;
}
.circuit-lab #zoom-level {
  min-width: 44px;
  text-align: center;
}
/* The view cluster sits beside the edit tools' column. */
.circuit-lab canvas:focus-visible {
  outline-offset: -2px;
}
.circuit-lab .fl-toolbar button {
  touch-action: none;
}
/* Narrow screens: the column drops below the toolbar and starts folded
   (see app.js). */
@media (max-width: 900px) {
  .cl-top {
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .cl-side {
    flex-basis: auto;
    width: min(292px, 100%);
    margin-left: auto;
    order: 3;
  }
}