/* The balance instrument (home and Weigh it). */

.bal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-areas:
    "wa fig wb"
    "la fig lb"
    "fa fig fb";
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1rem, 2vw, 2.5rem);
  align-items: start;
  container-type: inline-size;
}
.bal-word-a { grid-area: wa; }
.bal-word-b { grid-area: wb; text-align: right; }
.bal-list-a { grid-area: la; }
.bal-list-b { grid-area: lb; }
.bal-add-a { grid-area: fa; }
.bal-add-b { grid-area: fb; }
.bal-fig { grid-area: fig; container-type: inline-size; }

/* The answer words. Their weight is driven by the beam (balance.js). */
.bal-word {
  margin: 0 0 var(--s3);
  font-size: clamp(2.25rem, 6.6cqi, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "wght" 500;
  min-height: 1.95em;
  display: flex;
  align-items: flex-end;
}
.bal-word-b { justify-content: flex-end; }
.bal-word-a { color: var(--a); }
/* Option B is ink on lamp yellow (yellow text on paper would fail contrast). */
.bal-word-b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.2em; text-underline-offset: 0.04em; text-decoration-skip-ink: none; }

/* The figure. */
.bal-svg { width: 100%; height: auto; overflow: visible; }
.bal-svg .tick { stroke: var(--ink); stroke-width: 1.5; }
.bal-svg .tick-0 { stroke-width: 2.5; }
.bal-stand { fill: var(--ink); }
.bal-foot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.bal-ground { stroke: var(--hair); stroke-width: 1; }
.bal-string { stroke: var(--ink); stroke-width: 1.4; }
.bal-bowl { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.bal-hook { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bal-bar { fill: var(--ink); }
.bal-needle { fill: var(--ink); }
.bal-end { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bal-pin { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.bal-pin-dot { fill: var(--ink); }
.bal-disc-a { fill: var(--a); }
.bal-disc-b { fill: var(--b); stroke: var(--ink); stroke-width: 1.5; }
.bal-disc.is-struck { fill: transparent; stroke: var(--ink-2); stroke-dasharray: 3 3; stroke-width: 1.5; }

.bal-read {
  margin: var(--s2) 0 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--s3);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.bal-read .ra { color: var(--a); min-width: 2ch; text-align: right; }
.bal-read .rb { min-width: 2ch; }
.bal-read .rsep { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }

/* Considerations, each a weight from 0 to 5. */
.bal-list { list-style: none; margin: 0; padding: 0; }
.bal-item { position: relative; margin: 0; padding: var(--s2) 0 var(--s2); border-top: var(--bw) solid var(--hair); }
.bal-item:last-child { border-bottom: var(--bw) solid var(--hair); }
.dots { border: 0; margin: 0; padding: 0; min-width: 0; }
.bal-text { padding: 0; font-size: var(--fs-small); font-weight: 560; line-height: 1.3; margin-bottom: 2px; }
.bal-list-b .bal-text { float: right; text-align: right; }
.bal-list-b .dots-row { clear: both; justify-content: flex-end; }
.dots-row { display: flex; margin-inline: -8px; }
.dot-label { position: relative; display: grid; place-items: center; width: 40px; height: 44px; cursor: pointer; }
.dot-label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.dot-zero .dot { width: auto; height: auto; border-radius: 0; border: 0; background: none; }
.dot-zero .dot::before { content: "0"; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.bal-list-a .dot-label.on .dot { background: var(--a); border-color: var(--a); }
.bal-list-b .dot-label.on .dot { background: var(--b); }
.dot-label:hover .dot { transform: scale(1.18); }
.dot-label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: -2px; border-radius: var(--r-control); }
.dot-label input:checked + .vh + .dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.dot-zero input:checked + .vh + .dot { box-shadow: none; }
.dot-zero input:checked + .vh + .dot::before { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.bal-item.is-struck .bal-text { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.bal-item.is-struck .dots-row { opacity: 0.4; }

/* Editing (Weigh it). */
.bal-rm { position: absolute; top: 0; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-2); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: var(--r-control); }
.bal-list-a .bal-rm { right: -10px; }
.bal-list-b .bal-rm { left: -10px; }
.bal-rm:hover { color: var(--red); background: var(--paper-2); }
.bal-list-a .bal-item { padding-right: 36px; }
.bal-list-b .bal-item { padding-left: 36px; }
.bal-add { display: flex; gap: var(--s2); margin-top: var(--s3); }
.bal-add-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--s3); border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-small); }
.bal-add-input::placeholder { color: var(--ink-2); opacity: 1; }

@media (max-width: 760px) {
  .bal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "fig fig"
      "wa wa"
      "la la"
      "fa fa"
      "wb wb"
      "lb lb"
      "fb fb";
    grid-template-rows: none;
  }
  .bal-word { font-size: clamp(2rem, 11cqi, 3.25rem); min-height: 0; margin-top: var(--s2); }
  .bal-word-b { justify-content: flex-start; text-align: left; margin-top: var(--s6); }
  .bal-list-b .bal-text { float: none; text-align: left; }
  .bal-list-b .dots-row { justify-content: flex-start; }
  .bal-list-b .bal-rm { left: auto; right: -10px; }
  .bal-list-b .bal-item { padding-left: 0; padding-right: 36px; }
}