/* ── Focus mode ────────────────────────────── */
.focus-panel {
  /* Light grain: fine white-fleck noise at low alpha, sitting above the glass
     tint and below child content (multi-bg layers top→bottom). */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--glass-heavy);
  border: none;
  border-radius: var(--radius-card);
  padding: 24px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.focus-panel[hidden] { display: none; }

.focus-title {
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.focus-timer-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto 18px;
}

/* Pomodoro mode: less bottom margin since phase buttons follow */
.focus-panel[data-mode="pomodoro"] > .focus-timer-wrap {
  margin-bottom: 14px;
}

.focus-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}

.focus-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 10;
}

.focus-ring-progress {
  fill: none;
  stroke: #6F447D;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 578.05;
  stroke-dashoffset: 578.05;
  transition: stroke-dashoffset 0.3s linear;
}

.focus-timer-wrap[data-phase="short"] .focus-ring-progress,
.focus-timer-wrap[data-phase="long"] .focus-ring-progress {
  stroke: var(--green-dark);
}

.focus-timer-wrap[data-mode="stopwatch"] .focus-ring {
  display: none;
}

.focus-penguin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg) translateY(-119.6px);
  will-change: transform;
}

.focus-penguin-img {
  position: absolute;
  width: auto;
  height: 80px;
  left: -40px;
  top: -48px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: rotate(0deg);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.focus-timer-wrap[data-mode="stopwatch"] {
  height: auto;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.focus-timer-wrap[data-mode="stopwatch"] .focus-timer {
  position: static;
  transform: none;
  order: 1;
}

.focus-timer-wrap[data-mode="pomodoro"] .focus-penguin {
  display: none;
}

.focus-timer-wrap[data-mode="stopwatch"] .focus-penguin {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  order: 0;
  flex-shrink: 0;
}

.focus-timer-wrap[data-mode="stopwatch"] .focus-penguin-img {
  position: static;
  left: auto;
  top: auto;
  display: block;
  width: 174px;
  height: 174px;
}

.focus-timer {
  color: white;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: fit-content;
}
.focus-timer.is-running {
  cursor: default;
}

/* focus timer click-to-edit uses .input.input--timer */

.focus-mode-toggle-row:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.focus-mode-toggle-panel {
  flex: 65;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.focus-mode-toggle-row::after {
  content: '';
  flex: 35;
}

/* Inline settings button inside pomodoro controls row */
.focus-pom-settings-inline {
  position: relative;
}

.focus-pom-settings-inline[hidden] { display: none; }

.pomodoro-cycle:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  margin-bottom: 24px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.pomodoro-cycle:not([hidden])::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.pomodoro-cycle:not([hidden]):hover::after {
  opacity: 1;
}

.cycle-penguin {
  width: auto;
  height: 40px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.2;
  filter: grayscale(1);
  user-select: none;
  -webkit-user-drag: none;
}

.cycle-penguin.active {
  opacity: 1;
  filter: none;
}

.pomodoro-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

/* Each row is a .field — label on top, then input + suffix inline. */
.pomodoro-settings .pom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pomodoro-settings .pom-suffix {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  /* Fixed width so all inputs (regardless of suffix length) line up. */
  flex: 0 0 50px;
}

.pomodoro-settings .input {
  flex: 1;
  text-align: center;
}

.pomodoro-settings.is-running .input {
  opacity: 0.5;
  pointer-events: none;
}

.focus-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  justify-content: center;
  align-items: center;
}

/* Pomodoro mode: controls row is more compact, sits above the circle */
.focus-panel[data-mode="pomodoro"] > .focus-controls {
  margin-bottom: 16px;
}

/* Focus controls: pause + reset are larger than default icon-btn (44 → 52px). */
.focus-controls > #focus-toggle,
.focus-controls > #focus-reset,
.focus-controls #focus-timer-settings-btn-2 {
  width: 52px;
  height: 52px;
}

.pom-auto-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pom-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  color: var(--text);
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

.focus-label {
  display: block;
  color: rgba(255,255,255,0.80);
  font-size: var(--text-md);
  margin-bottom: 6px;
}

.focus-items {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
  overflow: hidden;
}

.focus-items[hidden] { display: none; }

/* Checklist rows reuse .task but render slightly larger than modal tasks. */
.focus-items .task,
.focus-items .task:not(.task--session-header) {
  /* Override modal.css `.task { background: #fcfcfc }` — keep rows transparent
     so the .focus-items 80% white shows through, not an opaque overlay. */
  background: transparent;
  min-height: 56px;
}
.focus-items .task span,
.focus-items .task .task__text {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}
/* Checklist drag-handle + remove glyphs: 20px, neutral lilac-grey. */
.focus-items .task__drag-handle,
.focus-items .task__remove {
  color: #ccc2cf;
}
.focus-items .task__drag-handle svg,
.focus-items .task__remove svg {
  width: 20px;
  height: 20px;
  display: block;
}
.focus-items .task__drag-handle {
  opacity: 1;
  margin-right: -4px; /* row gap is 8px; pull text 4px closer to handle */
}
.focus-items .task__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
}
.focus-items .task__text {
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
}
.focus-items .task__text:hover,
.focus-items .input--inline {
  background: #e5dce8;
}
.focus-items .input--inline {
  height: auto;
  padding: 4px;
  margin: -4px;
  border: none;
  border-radius: 4px;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: inherit;
}
.focus-items .input--inline:focus {
  border: none;
  box-shadow: none;
}
.focus-items .task__remove:hover {
  background: rgba(224, 85, 85, 0.1);
  color: var(--red, var(--red-dark));
}

/* focus panel inputs: use class="input" (textarea + text inputs); spacing only */
#focus-new-item { margin-bottom: 20px; overflow: hidden; }
#focus-note { margin-bottom: 16px; }

.focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}