/* ── 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;
}

/* ── Carry-over suggestions (unfinished from earlier sessions) ── */
.focus-carryover { margin-top: 10px; }
.focus-carryover .task--suggestion { cursor: pointer; }
.focus-carryover .task--suggestion:hover { background: #e5dce8; }
.focus-carryover .task__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6f447d;
  cursor: pointer;
}
.focus-carryover .task__add svg { width: 20px; height: 20px; }
.focus-carryover .task__text { cursor: pointer; }

/* ── Animated character (inline SVG in index.html; runs only while a session is active).
   Source art: img/characters/noodle-girl-scratch-animated.svg — every part is its own
   shape, so the hands tilt from their wrists without seams. ── */
.focus-penguin-img .cp-hand,
.focus-penguin-img .cp-cat,
.focus-penguin-img .cp-cat-fur { transform-box: view-box; }
.focus-penguin-img .cp-hand-left  { transform-origin: 31.5px 79.8px; }
.focus-penguin-img .cp-hand-right { transform-origin: 88px 88.5px; }
.focus-penguin-img .cp-cat,
.focus-penguin-img .cp-cat-fur { transform-origin: 101px 129px; }
.focus-penguin-img .cp-key,
.focus-penguin-img .cp-z { transform-box: fill-box; transform-origin: 50% 50%; }
.focus-penguin-img .cp-steam path { transform-box: fill-box; transform-origin: 50% 100%; }
.focus-penguin-img .cp-z { opacity: 0; }

/* Typing furiously: hands tilt fast, out of step; keys jiggle. */
.focus-penguin-img.is-active .cp-hand-left  { animation: cp-type-l 0.14s ease-in-out infinite alternate; }
.focus-penguin-img.is-active .cp-hand-right { animation: cp-type-r 0.12s ease-in-out infinite alternate; animation-delay: -0.06s; }
.focus-penguin-img.is-active .cp-key { animation: cp-key 0.13s steps(2) infinite; }
.focus-penguin-img.is-active .cp-key-x2,
.focus-penguin-img.is-active .cp-key-line2 { animation-delay: -0.065s; }
/* Steam: wiggles in place (no drift, no fade), staggered. */
.focus-penguin-img.is-active .cp-steam path { animation: cp-steam 1.6s ease-in-out infinite; }
.focus-penguin-img.is-active .cp-steam-2  { animation-delay: -0.2s; }
.focus-penguin-img.is-active .cp-steam-3  { animation-delay: -0.45s; }
.focus-penguin-img.is-active .cp-steam-4  { animation-delay: -0.7s; }
.focus-penguin-img.is-active .cp-steam-5  { animation-delay: -0.9s; }
.focus-penguin-img.is-active .cp-steam-6  { animation-delay: -1.1s; }
.focus-penguin-img.is-active .cp-steam-7  { animation-delay: -1.35s; }
.focus-penguin-img.is-active .cp-steam-8  { animation-delay: -1.55s; }
.focus-penguin-img.is-active .cp-steam-9  { animation-delay: -1.8s; }
.focus-penguin-img.is-active .cp-steam-10 { animation-delay: -2s; }
/* Blink: eye + pupil squash, swap to a closed-lid line for ~150ms, then reopen. */
.focus-penguin-img .cp-eye-outline,
.focus-penguin-img .cp-pupil { transform-box: fill-box; transform-origin: 50% 50%; }
.focus-penguin-img.is-active .cp-eye-outline,
.focus-penguin-img.is-active .cp-pupil { animation: cp-blink 3.8s linear infinite; }
.focus-penguin-img .cp-eye-closed { opacity: 0; }
.focus-penguin-img.is-active .cp-eye-closed { animation: cp-lid 3.8s linear infinite; }
/* Sleeping cat: slow breathing + z's floating up. */
.focus-penguin-img.is-active .cp-cat,
.focus-penguin-img.is-active .cp-cat-fur { animation: cp-breathe 3.2s ease-in-out infinite; }
.focus-penguin-img.is-active .cp-z  { animation: cp-z 3.6s ease-out infinite; }
.focus-penguin-img.is-active .cp-z2 { animation-delay: 1.2s; }
.focus-penguin-img.is-active .cp-z3 { animation-delay: 2.4s; }

@keyframes cp-type-l { 0% { transform: rotate(-2deg); } 100% { transform: rotate(8.5deg); } }
@keyframes cp-type-r { 0% { transform: rotate(1deg) translate(0, -0.4px); }  100% { transform: rotate(-7deg) translate(-0.3px, 0.9px); } }
@keyframes cp-blink  { 0%, 89%, 100% { transform: scaleY(1); opacity: 1; } 92% { transform: scaleY(0.35); opacity: 1; }
                        92.1%, 96% { transform: scaleY(0.35); opacity: 0; } 96.1% { transform: scaleY(0.4); opacity: 1; } }
@keyframes cp-lid    { 0%, 92%, 96.1%, 100% { opacity: 0; } 92.1%, 96% { opacity: 1; } }
@keyframes cp-key    { 50% { transform: translateY(0.35px); } }
@keyframes cp-steam  { 0%, 100% { transform: skewX(0) scaleY(1); } 25% { transform: skewX(-8deg) scaleY(1.06); } 75% { transform: skewX(8deg) scaleY(0.96); } }
@keyframes cp-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.025, 1.06); } }
@keyframes cp-z { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 1; }
                  100% { transform: translate(7px, -13px) scale(1.25) rotate(-10deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .focus-penguin-img.is-active * { animation: none; }
}

/* .focus-label sets display, which beats the [hidden] attribute. */
.focus-label[hidden] { display: none; }