/* Hex clock: a real local clock for one measured hex. Solid panel, no blur, 44 px nothing to tap. */
.hex-clock { margin-top: 12px; }
.hxc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #1A3748; border-radius: 16px; background: linear-gradient(160deg, rgba(8,21,37,.96), rgba(2,12,28,.98)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.hxc.night { background: linear-gradient(160deg, rgba(4,10,24,.98), rgba(0,4,14,.99)); }
.hxc-face { flex: none; width: 96px; height: 96px; }
.hxc-ring { fill: rgba(0,6,20,.6); stroke: rgba(34,211,238,.45); stroke-width: 1.2; }
.hxc.night .hxc-ring { stroke: rgba(168,85,247,.5); }
.hxc-tick { stroke: rgba(191,213,230,.35); stroke-width: 1; }
.hxc-tick.major { stroke: rgba(234,246,251,.7); stroke-width: 1.6; }
.hxc-hour { stroke: #EAF6FB; stroke-width: 3; stroke-linecap: round; }
.hxc-min { stroke: #A5F3FC; stroke-width: 2; stroke-linecap: round; }
.hxc-sec { stroke: #F59E0B; stroke-width: 1; stroke-linecap: round; }
.hxc-cap { fill: #22D3EE; }
.hxc-text { flex: 1; min-width: 0; }
.hxc-time { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hxc-digital { font: 700 26px/1 "Space Grotesk", sans-serif; color: #EAF6FB; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hxc-state { font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 8px; border: 1px solid #1A3748; color: #BFD5E6; }
.hxc-state.day { color: #FDE7B0; border-color: rgba(245,158,11,.5); }
.hxc-state.twilight { color: #E9D5FF; border-color: rgba(192,132,252,.5); }
.hxc-state.night { color: #A5F3FC; border-color: rgba(34,211,238,.45); }
.hxc-date { margin-top: 5px; color: #EAF6FB; font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hxc-zone, .hxc-sun, .hxc-last { margin-top: 3px; color: #8FA6BA; font: 500 11.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hxc-sun { color: #BFD5E6; }
@media (max-width: 360px) { .hxc { gap: 10px; padding: 10px; } .hxc-face { width: 80px; height: 80px; } .hxc-digital { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .hxc-sec { display: none; } }