/* time-money.css — P10 screen twins of the time + money cells (design/research/time-money.md).
 * Additive only: saved quizzes keep their stored HTML.
 *
 * 1. Coins you tap to count. In the screen twin every coin sits in a label with a hidden check
 *    box (sheet/cells/tmkit.js coinRow). A tap marks the coin counted — a ring and a tick, never a
 *    number, so tapping never gives the total away. Ink only (INK-1).
 * 2. The set-the-clock widget (widgets/clock-set.js) drawn black on white like the paper face
 *    (RP-100, RP-101): hands told apart by length and weight, not colour. */

.tm-cointap { cursor: pointer; border-radius: 50%; }
.tm-cointap-in {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; z-index: 1;
}
.tm-cointap-mark {
    position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    border: 3px solid transparent;
}
.tm-cointap-in:checked ~ .tm-cointap-mark { border-color: #000; }
.tm-cointap-in:checked ~ .tm-cointap-mark::after {
    content: ''; position: absolute; right: -6px; top: -6px; width: 16px; height: 16px;
    border-radius: 50%; background: #000;
    -webkit-mask: none;
}
.tm-cointap-in:focus-visible ~ .tm-cointap-mark { border-color: #000; border-style: dashed; }

/* the set-the-clock widget, black and white */
.cs-host .cs-face { fill: #fff; stroke: #000; stroke-width: 3; }
.cs-host .cs-numeral { fill: #000; font-family: 'Andika', 'Open Sans', sans-serif; font-weight: 700; }
.cs-host .cs-tick { stroke: #000; }
.cs-host .cs-hand.cs-hour { stroke: #000; stroke-width: 8; }
.cs-host .cs-hand.cs-minute { stroke: #000; stroke-width: 5; }
.cs-host .cs-hand:focus { filter: none; outline: none; stroke-dasharray: none; }
.cs-host .cs-hand:focus-visible { stroke: #000; filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 3px #949494); }
.cs-host .cs-pivot { fill: #000; }
.cs-host .cs-hit { cursor: grab; }
.cs-host .cs-clock { touch-action: none; }
.cs-host .cs-btn { min-width: 44px; min-height: 44px; }
.dark .cs-host .cs-face { fill: #fff; stroke: #000; }
/* the +/- rows wrap on a phone rather than run off the card */
.cs-host .cs-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.cs-host .cs-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }