/* =====================================================================
   timer.css — the look of sky/timer.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.pomodoro {
    aspect-ratio: 1;
    z-index: 3;
    cursor: pointer;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4));
    transition: transform .2s;
}
.pomodoro:hover,
.pomodoro:focus-visible {
    transform: translateY(-3px);
    outline: none;
}
.pomodoro>svg,
.pomodoro>.art,
.pomodoro>.pomo-run {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pomodoro>.pomo-run {
    display: none;
}
.pomodoro.running.has-run>.pomo-run {
    display: block;
}
.pomodoro.running.has-run>.art,
.pomodoro.running.has-run>svg {
    visibility: hidden;
}
.pomodoro .pomo-dial {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform .6s;
}
.pomodoro.ringing {
    animation: pomo-ring .09s linear 14 alternate;
}
@keyframes pomo-ring {
    from {
        transform: rotate(-7deg);
    }
    to {
        transform: rotate(7deg);
    }
}
.pomodoro .pomo-badge {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(42, 29, 20, .85);
    color: #f3e6c2;
    font: italic .82rem/1.5 "IM Fell English", Georgia, serif;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}
.pomodoro.running .pomo-badge,
.pomodoro.done .pomo-badge,
.pomodoro:hover .pomo-badge {
    opacity: 1;
}
/* the card */
.pomo-panel {
    position: fixed;
    z-index: 7;
    width: 300px;
    padding: 16px 18px 14px;
    color: #3a2716;
    text-align: center;
    font-family: "IM Fell English", Georgia, serif;
    background: #eadcb9 var(--panel-art, none) center / 100% 100% no-repeat;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 30px rgba(120, 80, 30, .25);
    transform-origin: 50% 100%;
    transform: scale(.9) translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.pomo-panel.has-art {
    box-shadow: none;
}
.pomo-panel.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s;
}
.pomo-panel .pp-modes {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 6px;
}
.pomo-panel button {
    white-space: nowrap;
    font: italic .88rem "IM Fell English", Georgia, serif;
    color: #3a2716;
    background: #f8f0dc;
    border: 1px solid rgba(110, 82, 54, .35);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
}
.pomo-panel button:hover {
    background: #fff8e6;
}
.pomo-panel .pp-modes button[aria-pressed=true] {
    background: #3a2716;
    color: #f3e6c2;
    border-color: #3a2716;
}
.pomo-panel .pp-time {
    font: normal 3.2rem/1.1 "IM Fell English SC", Georgia, serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin: 4px 0 2px;
}
.pomo-panel .pp-what {
    font-style: italic;
    font-size: .9rem;
    color: #6e5236;
    min-height: 1.3em;
}
.pomo-panel .pp-dots {
    margin: 6px 0 10px;
    letter-spacing: 4px;
    color: #9a3b1f;
    font-size: .9rem;
}
.pomo-panel .pp-acts {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.pomo-panel .pp-acts .go {
    background: #9a3b1f;
    color: #f3e6c2;
    border-color: #9a3b1f;
    min-width: 86px;
}
.pomo-panel .pp-acts .go:hover {
    background: #b24a28;
}
.pomo-panel .pp-x {
    position: absolute;
    top: 4px;
    right: 6px;
    border: 0;
    background: none;
    font-size: 1.1rem;
    padding: 2px 6px;
}