/* One circular outline stretches into the capsule, including its timer progress. */
.pomodoro {
  --pomodoro-color: var(--tint-readable, var(--tint));
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin-left: 4px;
  color: var(--label);
  font-family: var(--font);
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  transition: width .32s cubic-bezier(.22, 1, .36, 1), gap .32s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}
.pomodoro[data-phase="break"] { --pomodoro-color: var(--ok); }
.pomodoro-panel { position: relative; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; }
.pomodoro-ring { position: absolute; inset: 0; display: block; width: 100%; height: 60px; pointer-events: none; }
.pomodoro-ring > rect { width: calc(100% - 8px); fill: none; stroke-width: 1.8; }
.pomodoro-track { stroke: var(--separator); opacity: .5; }
.pomodoro-progress {
  stroke: var(--pomodoro-color);
  stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset .25s linear, stroke .2s;
}
.pomodoro[data-status="paused"] .pomodoro-progress { opacity: .55; }
.pomodoro[data-status="completed"] .pomodoro-track { stroke: var(--ok); opacity: .55; }
.pomodoro-readout { position: absolute; inset: 0; text-align: center; pointer-events: none; }
.pomodoro-time { position: absolute; top: 15px; left: 0; width: 100%; font: 700 16px/1.1 var(--mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pomodoro-phase { position: absolute; top: 34px; left: 0; width: 100%; color: var(--label-secondary); font-size: 9px; font-weight: 600; white-space: nowrap; }
.pomodoro button {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--label);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  cursor: pointer;
  box-shadow: none;
}
.pomodoro button:focus-visible { outline: 2px solid var(--pomodoro-color); outline-offset: -3px; }
.pomodoro .pomodoro-open { position: absolute; inset: 0; width: 60px; height: 60px; border-radius: 50%; background: transparent; }
.pomodoro .pomodoro-open:hover { background: var(--fill-quaternary); }
.pomodoro .pomodoro-open:active { background: var(--fill-tertiary); }
.pomodoro [hidden] { display: none !important; }
.pomodoro.is-open { width: 220px; gap: 8px; padding-right: 8px; background: var(--bg-elevated); }
.pomodoro-controls {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  max-width: 0; overflow: hidden;
  transition: max-width .32s cubic-bezier(.22, 1, .36, 1);
}
.pomodoro.is-open .pomodoro-controls { max-width: 144px; }
.pomodoro .pomodoro-controls button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: transparent; color: var(--label-secondary);
  opacity: 0; transform: translateX(-10px) scale(.84);
  transition: opacity .14s ease, transform .24s cubic-bezier(.22, 1, .36, 1), background .16s ease, color .16s ease;
}
.pomodoro.is-open .pomodoro-controls button { opacity: 1; transform: none; }
.pomodoro.is-open .pomodoro-controls button:nth-child(1) { transition-delay: 40ms; }
.pomodoro.is-open .pomodoro-controls button:nth-child(2) { transition-delay: 75ms; }
.pomodoro.is-open .pomodoro-controls button:nth-child(3) { transition-delay: 110ms; }
.pomodoro .pomodoro-controls .pomodoro-primary {
  background: var(--pomodoro-color); color: var(--tint-ink);
}
.pomodoro[data-phase="break"] .pomodoro-primary { color: var(--semantic-ink); }
.pomodoro.is-open .pomodoro-controls button:hover { background: var(--fill-tertiary); color: var(--label); transform: translateY(-1px); transition-delay: 0s; }
.pomodoro.is-open .pomodoro-controls .pomodoro-primary:hover { background: var(--pomodoro-color); color: var(--tint-ink); filter: brightness(1.08); }
.pomodoro[data-phase="break"].is-open .pomodoro-primary:hover { color: var(--semantic-ink); }
.pomodoro.is-open .pomodoro-controls button:active { transform: scale(.92); transition-delay: 0s; }
.pomodoro-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pomodoro-toggle-icon g { fill: currentColor; stroke: none; transform-origin: 12px 12px; transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1); }
.pomodoro-play { opacity: 1; transform: none; }
.pomodoro-pause { opacity: 0; transform: rotate(-35deg) scale(.65); }
.pomodoro[data-status="running"] .pomodoro-play { opacity: 0; transform: rotate(35deg) scale(.65); }
.pomodoro[data-status="running"] .pomodoro-pause { opacity: 1; transform: none; }
.pomodoro-restart .pomodoro-icon { transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.pomodoro-restart:hover .pomodoro-icon { transform: rotate(-35deg); }
.pomodoro.is-open .pomodoro-controls button:disabled { opacity: .3; cursor: default; transform: none; background: transparent; color: var(--label-tertiary); }
.pomodoro-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Keep the ring in the bar while each module retains its existing shortcuts. */
.topbar.pomodoro-host, .glass-topbar.pomodoro-host, .hub-topbar.pomodoro-host { gap: clamp(8px, 2vw, 20px); overflow: visible; }
.calendar-nav.pomodoro-host { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; overflow: visible; }
.pomodoro-host > .brand, .pomodoro-host > .glass-brand { min-width: 0; }
.pomodoro-host .brand-copy { min-width: 0; overflow: hidden; }
.pomodoro-host .brand-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pomodoro-host .top-actions { flex: 0 0 auto; }
.hub-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; min-height: var(--nav-height);
  padding: 0 max(16px, calc((100vw - 1180px) / 2));
  background: var(--material-thick); border-bottom: var(--hairline) solid var(--separator);
  backdrop-filter: blur(var(--material-blur)); -webkit-backdrop-filter: blur(var(--material-blur));
}
.hub-topbar > a { color: var(--label); font: 800 12px var(--mono); letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.hub-topbar #account-controls { margin: 0 0 0 auto !important; flex-wrap: nowrap !important; min-width: 0; overflow-x: auto; }
.hub-topbar #account-controls > * { flex: 0 0 auto; white-space: nowrap; }
.hub-topbar #account-controls[hidden] + .pomodoro { margin-left: auto; }
.calendar-nav > .pomodoro { margin-left: auto; }
.pomodoro-host:has(> .brand):not(:has(> nav, > .topbar-meta)) > .pomodoro { margin-left: auto; }
.pomodoro-host.pomodoro-expanded > .pomodoro { margin-left: auto; }
@media (max-width: 820px) {
  .pomodoro-expanded > .top-actions, .pomodoro-expanded > .topbar-shortcuts,
  .pomodoro-expanded > .glass-shortcuts, .pomodoro-expanded > .mobile-menu-button,
  .pomodoro-expanded > #account-controls, .pomodoro-expanded > .nav-title { display: none !important; }
  .calendar-nav.pomodoro-expanded { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .pomodoro-expanded .brand-copy, .pomodoro-expanded .glass-brand strong { display: none; }
  .pomodoro-expanded > .brand, .pomodoro-expanded > .glass-brand { flex-shrink: 0; min-width: 44px; }
  .pomodoro-expanded .back-link { min-width: 44px; justify-content: center; }
  .pomodoro-expanded .back-link span { display: none; }
  .hub-topbar.pomodoro-expanded > a { flex: 0 0 44px; font-size: 0; text-align: center; }
  .hub-topbar.pomodoro-expanded > a::after { content: "EH"; font: 800 12px var(--mono); }
}
@media (max-width: 560px) {
  .pomodoro-host > .brand, .pomodoro-host > .glass-brand { flex: 0 1 auto; }
  .pomodoro-host .brand-copy small { display: none; }
  .pomodoro-host .glass-brand strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hub-topbar #account-controls > span, .hub-topbar #account-controls > small { display: none; }
  .hub-topbar #account-controls { gap: 6px !important; }
  .calendar-nav .nav-title { display: none; }
  .calendar-nav.pomodoro-host { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pomodoro, .pomodoro-controls, .pomodoro-progress, .pomodoro .pomodoro-controls button,
  .pomodoro-toggle-icon g, .pomodoro-restart .pomodoro-icon { transition: none; }
}
@media print { .pomodoro, .hub-topbar { display: none !important; } }