/* Analog Clock widget (includes/clock_widget.php, assets/js/clock-widget.js). House tokens only; follows the theme (Dark default, Light). */
.ck { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; height: 100%; min-height: 0; }
.ck-main, .ck-two { display: flex; align-items: center; gap: 12px; min-width: 0; height: 100%; }
.ck-face { width: 110px; height: 110px; flex: none; display: block; }
.ck-s .ck-face { width: 76px; height: 76px; }
.dw[data-h="1"] .ck-m .ck-face { width: 76px; height: 76px; }
.dw[data-h="2"] .ck-face { width: 150px; height: 150px; }
.ck-rim { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.ck-tick { stroke: var(--text-muted); stroke-width: .8; stroke-linecap: round; }
.ck-tick.ck-hr { stroke: currentColor; stroke-width: 2; }
.ck-h, .ck-m { stroke: currentColor; stroke-linecap: round; transform-origin: 50px 50px; }
.ck-h { stroke-width: 4; }
.ck-m { stroke-width: 2.6; }
.ck-s { stroke: var(--blue); stroke-width: 1.2; stroke-linecap: round; transform-origin: 50px 50px; }
.ck-pin { fill: var(--blue); }
.ck-nosec .ck-s { display: none; }
.ck-dig { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: nowrap; }
.ck-dig b { font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.ck-dig span { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; }
.ck-two { border-left: 1px solid var(--line); padding-left: 14px; }
.dw .ck-two .ck-face { width: 104px; height: 104px; }
.ck-gear { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity .15s; }
.ck:hover .ck-gear, .ck-gear:focus-visible { opacity: 1; }
@media (hover: none) { .ck-gear { opacity: .7; } }
.ck-opts { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: auto; background: var(--card); border-radius: var(--r-md); font-size: var(--fs-small); }
.ck-opts[hidden] { display: none; }
.ck-opts .row { margin-top: auto; justify-content: flex-end; gap: 6px; }