.clock-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.clock-wrapper {
    container-type: inline-size;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.grid-stack-item-content {
    overflow: hidden;
}

.digital-clock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    font-family: 'Courier New', monospace;
    gap: 4%;
    --clock-scale: 1;
}

.digital-clock-dark {
    background-color: #111;
    color: #eee;
}

.digital-time {
    /* Taket och golvet skalas nu också med --clock-scale (ändrat av Claude). Tidigare var
       bara mittenvärdet skalat och taket fast på 6rem — på en bred klockwidget (stor TV) slog
       texten i taket redan vid 100%, så 150% gav ingen synlig effekt. Nu höjs taket i takt
       med inställningen. */
    font-size: clamp(calc(1.5rem * var(--clock-scale, 1)), calc(8cqw * var(--clock-scale, 1)), calc(6rem * var(--clock-scale, 1)));
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
}

.digital-colon {
    animation: blink 1s step-start infinite;
}

.digital-date {
    /* Skalat tak/golv — se .digital-time (ändrat av Claude). */
    font-size: clamp(calc(0.8rem * var(--clock-scale, 1)), calc(3.5cqw * var(--clock-scale, 1)), calc(2.5rem * var(--clock-scale, 1)));
    opacity: 0.75;
}

.digital-week {
    /* Skalat tak/golv — se .digital-time (ändrat av Claude). */
    font-size: clamp(calc(0.7rem * var(--clock-scale, 1)), calc(3cqw * var(--clock-scale, 1)), calc(2rem * var(--clock-scale, 1)));
    opacity: 0.6;
}

/* Dämpningen av datum/vecka kan stängas av (inställningen "Dämpa datum och vecka") — då
   visas de i full färg i stället för nedtonade. Klassen sätts på containern i JS. */
.digital-clock.digital-no-dim .digital-date,
.digital-clock.digital-no-dim .digital-week {
    opacity: 1;
}

@keyframes blink {
    50% { opacity: 0; }
}