/* btclaw.io — date wheel (js/datewheel.js): day · month · year columns that spin with a drag, the mouse wheel or the arrow keys */
.dw {
    --dw-row: 40px;
    --dw-card: var(--card, #ffffff);
    --dw-line: var(--line, #eae5db);
    --dw-band: var(--cream, #fdf1e1);
    --dw-band-line: var(--cream-line, #f3d9b4);
    --dw-ink: var(--ink, #1c1f28);
    --dw-sub: var(--sub, #6b6f7a);
    position: relative;
    display: grid;
    grid-template-columns: 0.8fr 1.45fr 1fr;
    gap: 2px;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    height: calc(var(--dw-row) * 5);
    padding: 0 8px;
    box-sizing: border-box;
    background: var(--dw-card);
    border: 1px solid var(--dw-line);
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.dw-band {
    position: absolute;
    inset-inline: 8px;
    top: calc(var(--dw-row) * 2);
    height: var(--dw-row);
    background: var(--dw-band);
    border: 1px solid var(--dw-band-line);
    border-radius: 11px;
    box-sizing: border-box;
    pointer-events: none;
}
.dw-col {
    position: relative;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    outline: none;
    border-radius: 10px;
}
.dw-col:active { cursor: grabbing; }
.dw-col:focus-visible { box-shadow: inset 0 0 0 2px var(--dw-ink); }
.dw-strip { position: absolute; inset-inline: 0; top: 0; will-change: transform; }
.dw-strip.dw-anim { transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.dw-row {
    height: var(--dw-row);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dw-sub);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dw-row[data-k="-1"], .dw-row[data-k="1"] { opacity: 0.8; }
.dw-row[data-k="-2"], .dw-row[data-k="2"] { opacity: 0.5; }
.dw-row.dw-mid { font-size: 1.12rem; font-weight: 700; color: var(--dw-ink); }
.dw-row.dw-out { opacity: 0.2; }
.dw-fade { position: absolute; inset-inline: 0; height: calc(var(--dw-row) * 1.6); pointer-events: none; }
.dw-top { top: 0; background: linear-gradient(var(--dw-card), transparent); }
.dw-bot { bottom: 0; background: linear-gradient(transparent, var(--dw-card)); }

/* the native input stays as the value holder, out of sight */
.dw-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%);
}
/* the wrappers the old field sat in lose their own frame: the wheel brings one */
.tf-in:has(> .dw), .calc-input-wrap:has(> .dw) {
    position: relative;
    display: block;
    border: 0;
    background: none;
    box-shadow: none;
    outline: none;
    padding: 0;
    overflow: visible;
}