/* On the Scale tool (assets/js/tools/on-the-scale.js) */
.ots-head { margin: 0 0 .4rem; font-weight: 700; color: var(--card-soft); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.ots-secret { margin: 0 0 .4rem; padding: .35rem .6rem; border: 1px dashed var(--card-red); border-radius: 8px; color: var(--card-red); font-size: .95rem; }
.ots-scale { display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; text-align: center; font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin: .4rem 0; }
.ots-arrow { color: var(--card-red); font-weight: 400; }
.tl-btn.ots-choice { display: block; width: 100%; margin: .4rem 0; padding: .3rem .6rem; }
.tl-btn.ots-choice .ots-scale { font-size: 1.1rem; margin: .2rem 0; }
.ots-own { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.ots-own input { padding: .45rem .55rem; font: inherit; border: 1px solid var(--card-line); border-radius: 6px; min-width: 0; }
.ots-target { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .4rem 0; }
.ots-tlabel { font-weight: 700; }
.ots-big { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--card-red); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }
.ots-strip { margin: .6rem 0; }
.ots-cells { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
.ots-cell {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--card-ink);
  background: var(--card); border: 1px solid var(--card-line); border-radius: 4px;
}
button.ots-cell { cursor: pointer; }
.ots-cell.t2 { background: color-mix(in srgb, var(--card-red) 12%, #fff); }
.ots-cell.t1 { background: color-mix(in srgb, var(--card-red) 30%, #fff); }
.ots-cell.t0 { background: var(--card-red); color: #fff; }
.ots-cell.mk { outline: 3px solid var(--card-ink); outline-offset: -3px; }
.ots-cell.mk::after { content: "★"; font-size: .7em; margin-left: 1px; }
.ots-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: .25rem; font-size: .9rem; color: var(--card-soft); }
.ots-ends span:last-child { text-align: right; }
.ots-say { margin: .7rem 0; padding: .3rem 0 .3rem .8rem; border-left: 4px solid var(--card-red); font-weight: 700; }
.ots-center { text-align: center; }
.tl-btn.ots-wide { width: 100%; }
.ots-called { margin: .6rem 0; }
.ots-num { display: inline-block; min-width: 2.2ch; margin: 0 .25rem .25rem 0; padding: .15rem .35rem; text-align: center; font-weight: 800; border: 1px solid var(--card-line); border-radius: 4px; background: var(--card); }
.ots-num.bad { color: #fff; background: var(--card-red); border-color: var(--card-red); }
.ots-hist { margin-top: .8rem; }
.ots-hist summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.ots-hist ol { margin: 0; padding-left: 1.4rem; font-size: .95rem; }