/* /digital-clock only: the clock face, night look, full-screen state and world-clock cards.
   Scoped under #dclApp. Colours are site tokens; night mode simply inverts ink and surface. */
#dclApp .dcl-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
#dclApp .dcl-add .ic-field { flex: 1 1 200px; margin: 0; min-width: 0; }
#dclApp .dcl-face { padding: 26px 14px; border-radius: 18px; background: var(--bm-accent-soft); text-align: center; }
#dclApp .dcl-time { font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; color: var(--bm-accent-strong); font-size: clamp(2.8rem, 13vw, 5.4rem); letter-spacing: .02em; overflow-wrap: anywhere; }
#dclApp .dcl-time small { font-size: .32em; margin-left: .25em; font-weight: 700; letter-spacing: 0; }
#dclApp .dcl-date { margin: 12px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--bm-ink); }
#dclApp .dcl-zone { margin: 4px 0 0; color: var(--bm-ink-3); font-size: .9rem; }
#dclApp .dcl-exit { margin-top: 18px; }
#dclApp .dcl-face.is-night { background: var(--bm-ink); }
#dclApp .dcl-face.is-night .dcl-time { color: var(--bm-surface); opacity: .82; }
#dclApp .dcl-face.is-night .dcl-date, #dclApp .dcl-face.is-night .dcl-zone { color: var(--bm-surface); opacity: .6; }
#dclApp .dcl-face:fullscreen, #dclApp .dcl-face.is-full { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0; }
#dclApp .dcl-face:fullscreen .dcl-time, #dclApp .dcl-face.is-full .dcl-time { font-size: clamp(4rem, 19vw, 22rem); }
#dclApp .dcl-face:fullscreen .dcl-date, #dclApp .dcl-face.is-full .dcl-date { font-size: clamp(1.2rem, 3.4vw, 3rem); }
#dclApp .dcl-world { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#dclApp .dcl-city { position: relative; border: 1px solid var(--bm-line); border-radius: 12px; padding: 10px 12px; background: var(--bm-surface); min-width: 0; }
#dclApp .dcl-city h4 { margin: 0 28px 2px 0; font-size: .92rem; color: var(--bm-ink); overflow-wrap: anywhere; }
#dclApp .dcl-city strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--bm-ink); }
#dclApp .dcl-city p { margin: 2px 0 0; font-size: .78rem; color: var(--bm-ink-3); }
#dclApp .dcl-city .dcl-rm { position: absolute; top: 6px; right: 6px; min-height: 0; padding: 2px 8px; }
@media (forced-colors: active) { #dclApp .dcl-city { border: 1px solid CanvasText; } }