/* Pomodoro (scoped) — only styles, no <script> here */

/* Container skin toggled inside the app only */
.pomodoro { --ringbg:#e9e9ef; --card-bg:var(--menu-bg, #fff); }
.pomodoro-dark { color:#eaeaf0; }
.pomodoro-light { color:#111; }

/* Card skin inherits from site tokens when available */
.pomodoro .toolrow{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.pomodoro .toolbtn{
  border:1px solid var(--border); background:var(--menu-bg); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600
}
.pomodoro .toolbtn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* Grid inside the card */
.pomodoro .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:900px){.pomodoro .grid{grid-template-columns:1fr}}

/* Inputs reuse .tool-page styles; just spacing here */
.pomodoro label{display:block;margin-bottom:6px;font-weight:600;font-size:14px}
.pomodoro .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* Segmented tabs */
.pomodoro .seg{display:flex;gap:8px}
.pomodoro .seg button{
  flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--menu-bg);font-weight:600;cursor:pointer;color:var(--text)
}
.pomodoro .seg button.active.focus{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.pomodoro .seg button.active.short{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.35)}
.pomodoro .seg button.active.long{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.35)}

/* Ring */
.pomodoro .ring-wrap{position:relative;width:min(78vw,360px);max-width:100%;aspect-ratio:1;margin:0 auto}
.pomodoro .ring-bg{stroke:var(--ringbg)}
.pomodoro .ring-fg{stroke-linecap:round;filter:drop-shadow(0 2px 8px rgba(0,0,0,.06))}
.pomodoro .time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pomodoro .time .big{font-size:clamp(48px,12vw,64px);font-weight:700;letter-spacing:.5px}
.pomodoro .time .sub{margin-top:6px;font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}

/* Pulse while running */
.pomodoro .pulse{position:absolute;inset:-10px;border-radius:999px;opacity:.25;filter:blur(14px)}
.pomodoro .pulse.running{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,58,237,.35)}100%{box-shadow:0 0 0 40px rgba(124,58,237,0)}}

/* Meta text + kbd */
.pomodoro .meta{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}
.pomodoro .kbd{padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--menu-bg);color:var(--text)}

/* Zen (fullscreen, countdown only) */
.pomodoro #zen{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:var(--bg, #0b0b0f);z-index:99999
}
.pomodoro #zen.active{display:flex}
.pomodoro #zenClock{font-size:16vw;font-weight:800;letter-spacing:.04em;line-height:1;color:var(--text);user-select:none}
@media (min-width:1200px){ .pomodoro #zenClock{font-size:190px} }
.pomodoro #zenTopBar{position:absolute;top:0;left:0;right:0;height:3px;opacity:.55;pointer-events:none}
.pomodoro #zenBadge{
  position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;background:var(--menu-bg);color:var(--text);
  border:1px solid var(--border);opacity:.9;transition:opacity .25s
}
.pomodoro #zenBadge.hide{opacity:0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pomodoro .pulse.running{ animation: none; }
  .pomodoro .ring-fg{ transition: none !important; }
}