/* Pomodoro timer (/pomodoro-timer): what is its own, the dial, the week bars and the phase colours. Panels, stat tiles,
   fields, buttons and the mode control come from the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's
   page (StylePaths). */

/* --- Phase colours: focus red, short break green, long break blue ----------------------------------------------
   The current phase is the app's accent (data-pt-current on the root, set by the script), so the mode control, the
   Start button, focus rings and checkboxes take its colour; the kit resolves --ak-accent-light / --ak-accent-dark in
   each theme. On light surfaces the break green is a shade darker for white or small text (#059669 is 3.8:1).
   --pt-accent is the plain phase colour for the ring, the glow and the bars. */
.pomodoro-landing-app {
    --pt-focus: #dc2626;
    --pt-break: #059669;
    --pt-long: #2563eb;
    --ak-accent-light: #dc2626;
    --ak-accent-dark: #f87171;
}

.dark .pomodoro-landing-app > .filter-landing-controls,
.pomodoro-landing-app[data-theme="dark"] > .filter-landing-stage {
    --pt-focus: #f87171;
    --pt-break: #34d399;
    --pt-long: #60a5fa;
}

.pomodoro-landing-app[data-pt-current="short"] {
    --ak-accent-light: #047857;
    --ak-accent-dark: #34d399;
}

.pomodoro-landing-app[data-pt-current="long"] {
    --ak-accent-light: #2563eb;
    --ak-accent-dark: #60a5fa;
}

/* Set on the app and on the stage, so the dark stage resolves it from its own phase colours. */
.pomodoro-landing-app,
.pomodoro-landing-app > .filter-landing-stage {
    --pt-accent: var(--pt-focus);
}

.pomodoro-landing-app[data-pt-current="short"],
.pomodoro-landing-app[data-pt-current="short"] > .filter-landing-stage {
    --pt-accent: var(--pt-break);
}

.pomodoro-landing-app[data-pt-current="long"],
.pomodoro-landing-app[data-pt-current="long"] > .filter-landing-stage {
    --pt-accent: var(--pt-long);
}

/* --- Stage: everything in one centred column ----------------------------------------------------------------------
   On phones the site caps the stage height and sets align-items: start on it (seo-pages.css, body.filter-app-mode):
   the children centre themselves, and the column is centred only while it fits, so the top is never cut off. */
.pomodoro-landing-app > .filter-landing-stage.ak-stage--center {
    justify-content: safe center;
}

.pomodoro-landing-app > .filter-landing-stage > * {
    align-self: center;
}

/* --- Mode control: each phase shows its own colour as a dot ----------------------------------------------------- */

.pomodoro-landing-app .pt-mode {
    --pt-dot: var(--pt-focus);
}

.pomodoro-landing-app .pt-mode[data-pt-mode="short"] {
    --pt-dot: var(--pt-break);
}

.pomodoro-landing-app .pt-mode[data-pt-mode="long"] {
    --pt-dot: var(--pt-long);
}

.pomodoro-landing-app .pt-mode::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pt-dot);
}

.pomodoro-landing-app .pt-mode[aria-pressed="true"]::before {
    background: currentColor;
    opacity: 0.85;
}

/* --- Dial -------------------------------------------------------------------------------------------------------- */

.pomodoro-landing-app .pt-dial {
    position: relative;
    width: min(320px, 80vw);
    aspect-ratio: 1;
}

/* A soft glow of the phase colour inside the ring. */
.pomodoro-landing-app .pt-dial::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pt-accent) 13%, transparent) 0%, transparent 70%);
    transition: background 0.3s ease;
}

.pomodoro-landing-app .pt-ring {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.pomodoro-landing-app .pt-ring-track,
.pomodoro-landing-app .pt-ring-bar {
    fill: none;
    stroke-width: 12;
}

.pomodoro-landing-app .pt-ring-track {
    stroke: color-mix(in srgb, var(--pt-accent) 16%, var(--ak-grid));
    transition: stroke 0.3s ease;
}

.pomodoro-landing-app .pt-ring-bar {
    stroke: var(--pt-accent);
    stroke-linecap: round;
    stroke-dasharray: 628.32;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.25s linear, stroke 0.3s ease, opacity 0.3s ease;
}

.pomodoro-landing-app[data-pt-state="running"] .pt-ring-bar {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pt-accent) 45%, transparent));
}

.pomodoro-landing-app[data-pt-state="paused"] .pt-ring-bar {
    opacity: 0.5;
}

.pomodoro-landing-app .pt-dial-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
}

.pomodoro-landing-app .pt-time {
    font-size: clamp(2.75rem, 12vw, 4.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: opacity 0.3s ease;
}

.pomodoro-landing-app[data-pt-state="paused"] .pt-time {
    opacity: 0.55;
}

.pomodoro-landing-app .pt-phase {
    padding: 0.15rem 0.7rem;
    border-radius: var(--ak-radius-pill);
    background: color-mix(in srgb, var(--pt-accent) 14%, transparent);
    color: var(--ak-accent);
    font-weight: 600;
}

.pomodoro-landing-app .pt-session {
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
}

/* A phase just ended: the dial pulses a few times in the colour of the next phase. */
.pomodoro-landing-app[data-pt-ended] .pt-dial {
    animation: pt-ended 0.9s ease-in-out 3;
}

@keyframes pt-ended {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* --- Buttons, task and statistics under the dial ----------------------------------------------------------------- */

.pomodoro-landing-app .pt-actions {
    justify-content: center;
}

.pomodoro-landing-app .pt-start {
    min-width: 8rem;
    border-radius: var(--ak-radius-pill);
}

.pomodoro-landing-app .pt-task,
.pomodoro-landing-app .pt-stats {
    width: min(420px, 100%);
}

.pomodoro-landing-app .pt-stats {
    border-top: 3px solid var(--pt-accent);
    transition: border-color 0.3s ease;
}

.pomodoro-landing-app .pt-stats-grid dd {
    margin: 0;
}

/* The last seven days, today in full colour. */
.pomodoro-landing-app .pt-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 48px;
    border-bottom: 1px solid var(--ak-border);
}

.pomodoro-landing-app .pt-bar {
    flex: 1;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pt-accent);
    opacity: 0.5;
}

.pomodoro-landing-app .pt-bar--today {
    opacity: 1;
}

.pomodoro-landing-app .pt-bar--empty {
    background: var(--ak-grid);
    opacity: 1;
}

.pomodoro-landing-app .pt-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
}

/* No keyboard on touch-only devices: the shortcut hint would only confuse. */
@media (hover: none) and (pointer: coarse) {
    .pomodoro-landing-app .pt-shortcuts {
        display: none;
    }
}

/* --- Settings: Mute and Test sound on one line ------------------------------------------------------------------- */

.pomodoro-landing-app .pt-row--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ak-space-2);
}

@media (prefers-reduced-motion: reduce) {
    .pomodoro-landing-app .pt-ring-bar,
    .pomodoro-landing-app .pt-ring-track,
    .pomodoro-landing-app .pt-dial::before,
    .pomodoro-landing-app .pt-time {
        transition: none;
    }

    .pomodoro-landing-app[data-pt-ended] .pt-dial {
        animation: none;
    }
}