/* Weighings board. Inherits the existing theme tokens (--text, --muted, --line, --accent, --action-text). */
.weigh { display: grid; justify-items: center; gap: .9rem; width: min(100%, 32rem); margin-inline: auto; color: inherit; }
/* The beam between the pans, and the pans themselves, which sit level while they are being
   loaded and tip to the last answer once they are empty again. */
.weigh-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .5rem; width: 100%; }
.weigh-pan { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: .35rem; min-height: 64px; padding: .5rem; border: 1px solid var(--line, #c2ccbd); border-top-width: 3px; border-radius: 0 0 8px 8px; background: color-mix(in srgb, currentColor 3%, transparent); }
.weigh-pivot { width: 2px; min-height: 64px; background: var(--line, #c2ccbd); }
.weigh-scale[data-reading="left"] .weigh-pan-left, .weigh-scale[data-reading="right"] .weigh-pan-right { transform: translateY(8px); border-top-color: var(--accent, currentColor); }
.weigh-scale[data-reading="left"] .weigh-pan-right, .weigh-scale[data-reading="right"] .weigh-pan-left { transform: translateY(-8px); }
.weigh-table { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; width: 100%; min-height: 48px; padding: .5rem; border: 1px dashed var(--line, #c2ccbd); border-radius: 6px; }
/* A coin says nothing about itself but its number and what the balance has settled about it. */
.weigh-coin { display: inline-flex; align-items: center; gap: .3rem; min-width: 44px; min-height: 44px; margin: 0; padding: .3rem .5rem; font: inherit; line-height: 1; color: inherit; background: transparent; border: 1px solid var(--line, #c2ccbd); border-radius: 50px; cursor: pointer; }
.weigh-number { font-variant-numeric: tabular-nums; }
.weigh-mark { font-size: .8125rem; color: var(--muted, currentColor); }
.weigh-coin[data-standing="cleared"] { opacity: .55; }
.weigh-coin[data-standing="heavy"], .weigh-coin[data-standing="light"] { border-color: var(--accent, currentColor); border-width: 2px; }
.weigh-coin:hover:not(:disabled) { border-color: var(--accent, currentColor); }
.weigh-coin:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 3px; }
.weigh-coin:disabled { cursor: default; opacity: .5; }
.weigh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.weigh-go { min-height: 44px; margin: 0; padding: .5rem 1.6rem; font: inherit; color: var(--action-text, var(--canvas, #fff)); background: var(--accent, currentColor); border: 1px solid var(--accent, currentColor); border-radius: 4px; cursor: pointer; }
.weigh-clear, .weigh-name { min-height: 44px; margin: 0; padding: .5rem 1rem; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line, #c2ccbd); border-radius: 4px; cursor: pointer; }
.weigh-go:disabled, .weigh-clear:disabled, .weigh-name:disabled { color: var(--muted, currentColor); background: transparent; border-color: var(--line, #c2ccbd); cursor: default; }
.weigh-go:focus-visible, .weigh-clear:focus-visible, .weigh-name:focus-visible, .weigh-pick:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 3px; }
.weigh-choice { min-height: 1.4rem; max-width: 34rem; margin: 0; font-size: .9375rem; line-height: 1.4; text-align: center; color: var(--muted, currentColor); }
.weigh-choice[data-refused="true"] { color: var(--text, currentColor); }
.weigh-log { display: grid; gap: .25rem; width: 100%; max-width: 34rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--muted, currentColor); }
.weigh-entry { margin: 0; font-variant-numeric: tabular-nums; }
.weigh-entry::before { content: counter(list-item) ". "; }
.weigh-log { counter-reset: list-item; }
.weigh-entry { counter-increment: list-item; }
.weigh-claim { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .9375rem; }
.weigh-claim-label { display: inline-flex; align-items: center; gap: .4rem; }
.weigh-pick { min-height: 44px; padding: .3rem .5rem; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line, #c2ccbd); border-radius: 4px; }
.weigh-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin: 0; font-size: .875rem; }
.weigh-metric { display: inline-flex; align-items: baseline; gap: .5rem; }
.weigh-label { color: var(--muted, currentColor); }
.weigh-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.weigh-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; text-align: center; color: var(--muted, currentColor); }
.weigh[data-state="solved"] .weigh-pan { border-color: var(--accent, currentColor); }
@media (prefers-reduced-motion: no-preference) {
  .weigh-coin, .weigh-go, .weigh-clear, .weigh-name { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
  .weigh-pan { transition: transform .3s ease, border-color .18s ease; }
}
@media (max-width: 380px) {
  .weigh { gap: .7rem; width: 100%; }
  .weigh-coin { min-width: 40px; padding: .3rem .4rem; }
  .weigh-tally { gap: .3rem 1.1rem; }
}
@media (forced-colors: active) {
  .weigh-coin, .weigh-go, .weigh-clear, .weigh-name, .weigh-pan, .weigh-pick { border-color: CanvasText; background: Canvas; color: CanvasText; }
}