/* Modo Foco — overlay fullscreen: só a próxima ação + timer, esconde o resto.
   z-index abaixo dos toasts (99999) pra o "concluída" aparecer por cima. */
body.focus-open { overflow: hidden; }

.focus-overlay {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px;
    background:
        radial-gradient(circle at 50% 30%, rgba(34, 197, 94, 0.08), transparent 50%),
        rgba(8, 9, 13, 0.97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation: focus-in 360ms var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes focus-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.focus-exit {
    position: absolute; top: 22px; right: 22px;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; border: none;
    color: var(--flowly-text-tertiary, #7c7889);
    transition: background 0.15s ease, color 0.15s ease;
}
.focus-exit i { width: 20px; height: 20px; }
.focus-exit:hover { background: var(--flowly-bg-elevated, rgba(255,255,255,0.06)); color: var(--flowly-text-primary, #f0eff4); }

.focus-body { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; }

.focus-progress {
    font-family: var(--flowly-font-mono, monospace); font-size: calc(12px * var(--flowly-text-k));
    color: var(--flowly-text-tertiary, #7c7889); margin-bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
}
.focus-cash {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--flowly-accent-success, #22c55e);
    padding: 3px 9px;
    background: rgb(var(--flowly-accent-success-rgb) / 0.1);
    border: 1px solid rgb(var(--flowly-accent-success-rgb) / 0.2);
    border-radius: 999px;
    box-shadow: 0 0 8px rgb(var(--flowly-accent-success-rgb) / 0.15);
}
.focus-cash i { width: 14px; height: 14px; }

/* Minimalismo (pedido do Kaleb 2026-07-14): o cronômetro é o protagonista.
   O título vira legenda — menor, cor secundária — e o kicker "Foco agora" saiu. */
.focus-title {
    font-size: calc(20px * var(--flowly-text-k)); line-height: 1.3; font-weight: 500;
    color: var(--flowly-text-secondary, #8e8a98); margin: 0;
    max-width: 100%; overflow-wrap: break-word;
}
.focus-title.is-money { color: var(--flowly-accent-success, #22c55e); }
.focus-title--done { font-size: calc(32px * var(--flowly-text-k)); font-weight: var(--flowly-weight-bold, 700); color: var(--flowly-text-primary, #f0eff4); margin-bottom: 10px; }
.focus-meta { font-size: calc(14px * var(--flowly-text-k)); color: var(--flowly-text-tertiary, #7c7889); margin: 0 0 24px; }

/* Fonte display (não mono), escala com a viewport; tabular-nums segura os
   dígitos no lugar enquanto o relógio anda. */
.focus-clock {
    font-family: var(--flowly-font-display); font-size: clamp(110px, 16vw, 180px); font-weight: 800;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
    color: var(--flowly-text-primary, #f0eff4); margin: 18px 0 44px;
    text-shadow: 0 0 60px rgba(255, 255, 255, 0.05);
    transition: text-shadow 280ms ease, color 280ms ease;
}
/* Com horas (HH:MM:SS, 8 dígitos) o relógio cheio estoura o corpo — escala menor. */
.focus-clock.is-long { font-size: clamp(76px, 11vw, 124px); }
.focus-clock.is-running {
    color: var(--flowly-accent-info, #0A84FF);
    text-shadow: 0 0 80px rgb(var(--flowly-accent-info-rgb) / 0.3);
}
/* Tick pulse — classe adicionada pelo JS a cada segundo quando running */

/* Meta batida: relógio vira overtime (+MM:SS) — vence o azul do is-running. */
.focus-clock.is-over {
    color: var(--flowly-accent-danger, #FF5C4D);
    text-shadow: 0 0 80px rgb(var(--flowly-accent-danger-rgb) / 0.35);
}

.focus-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.focus-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--flowly-radius-md, 12px); cursor: pointer;
    font-size: calc(14px * var(--flowly-text-k)); font-weight: 600;
    background: transparent;
    border: 1px solid var(--flowly-border-strong, rgba(255,255,255,0.1));
    color: var(--flowly-text-secondary, #8e8a98);
    transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.focus-btn i { width: 16px; height: 16px; }
.focus-btn:hover { transform: translateY(-1px); background: var(--flowly-bg-elevated, rgba(255,255,255,0.06)); color: var(--flowly-text-primary, #f0eff4); }
/* Primário segue o vocabulário do sistema (mesma ação "Começar" do herói do
   Hoje: accent + texto escuro) — o overlay não inventa botão próprio azul. */
.focus-btn--primary {
    background: linear-gradient(135deg, var(--flowly-accent-primary, #22c55e), rgb(var(--flowly-accent-success-rgb, 34 197 94) / 0.85));
    border-color: transparent;
    color: var(--flowly-text-inverse, #08090e);
    box-shadow: 0 4px 16px rgb(var(--flowly-accent-success-rgb) / 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.focus-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--flowly-accent-success-rgb) / 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.focus-btn--primary:active {
    transform: translateY(0) scale(0.97);
}

.focus-secondary { margin-top: 22px; min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.focus-link { background: none; border: none; cursor: pointer; font-size: calc(13px * var(--flowly-text-k)); color: var(--flowly-text-tertiary, #7c7889); transition: color 0.15s ease; }
.focus-link:hover { color: var(--flowly-text-secondary, #8e8a98); }

/* Meta de tempo (countdown) — chips discretos na linha secundária. */
.focus-goal { display: inline-flex; align-items: center; gap: 7px; font-size: calc(12px * var(--flowly-text-k)); color: var(--flowly-text-tertiary, #7c7889); }
.focus-goal__chip {
    background: none; cursor: pointer;
    border: 1px solid var(--flowly-border-strong, rgba(255,255,255,0.1));
    border-radius: 999px; padding: 2px 9px;
    font-size: calc(12px * var(--flowly-text-k)); font-variant-numeric: tabular-nums;
    color: var(--flowly-text-secondary, #8e8a98);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.focus-goal__chip:hover { background: var(--flowly-bg-elevated, rgba(255,255,255,0.06)); color: var(--flowly-text-primary, #f0eff4); }
.focus-goal__chip.is-on { color: var(--flowly-accent-info, #0A84FF); border-color: var(--flowly-accent-info, #0A84FF); }

@media (prefers-reduced-motion: reduce) {
    .focus-overlay { animation: none; }
    .focus-btn:hover { transform: none; }
}