/*
 * IlmBank — Timer (tool-specific)
 * Scoped to .ib-timer card.
 * Circle display + mode badges.
 */



/* Big digital readout inside circle */
.ib-timer .ib-timer-display-big,
#ib-timer-container .ib-timer-display-big {
  font-size: clamp(3rem, 12vw, 5rem);
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ib-neutral-800);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .ib-timer .ib-timer-display-big,
  #ib-timer-container .ib-timer-display-big {
    color: var(--ib-primary);
  }
}

/* Mode badges (Stopwatch / Countdown / Pomodoro) */
.ib-timer .ib-timer-modes {
  display: flex;
  justify-content: center;
  gap: var(--ib-space-sm);
  margin-bottom: var(--ib-space-md);
}
.ib-timer .ib-mode-badge {
  padding: 4px 12px;
  border-radius: var(--ib-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--ib-neutral-100);
  border: 1px solid var(--ib-neutral-300);
  color: var(--ib-neutral-700);
  cursor: pointer;
  transition: var(--ib-transition);
}
.ib-timer .ib-mode-badge:hover {
  background: var(--ib-primary);
  color: #fff;
  border-color: var(--ib-primary);
}
.ib-timer .ib-mode-badge.active {
  background: var(--ib-primary);
  color: #fff;
  border-color: var(--ib-primary);
}
@media (prefers-color-scheme: dark) {
  .ib-timer .ib-mode-badge {
    background: var(--ib-neutral-100);
    border-color: var(--ib-neutral-400);
    color: var(--ib-neutral-700);
  }
  .ib-timer .ib-mode-badge.active {
    background: var(--ib-primary);
    color: #fff;
  }
}

/* Inputs row (countdown mode) */
.ib-timer .ib-timer-inputs,
#ib-timer-container .ib-timer-inputs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--ib-space-sm);
  margin: var(--ib-space-md) 0;
}
.ib-input-number {
  width: 5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  border: 2px solid var(--ib-neutral-200);
  border-radius: var(--ib-radius-md);
  padding: var(--ib-space-sm);
  background: #fff;
}
@media (prefers-color-scheme: dark) {
  .ib-input-number {
    background: var(--ib-neutral-100);
    border-color: var(--ib-neutral-300);
    color: var(--ib-neutral-800);
  }
}

/* Laps */
.ib-timer-laps-wrap {
  margin-top: var(--ib-space-lg);
}
.ib-timer-laps th:first-child,
.ib-timer-laps td:first-child {
  width: 60px;
  text-align: center;
  font-weight: 600;
  color: var(--ib-neutral-600);
}

/* Presentation mode */
.ib-timer .ib-presentation .ib-header-row,
.ib-timer .ib-presentation .ib-timer-inputs,
.ib-timer .ib-presentation .ib-timer-controls + .ib-timer-laps-wrap {
  display: none !important;
}
.ib-timer .ib-presentation .ib-timer-display-big {
  font-size: clamp(5rem, 15vw, 12rem);
}

/* === Circular face + progress ring === */
.ib-timer .ib-timer-face {
  position: relative;
  display: grid;
  place-items: center;
  margin: var(--ib-space-lg) 0;
}

.ib-timer .ib-timer-svg {
  width: clamp(220px, 55vw, 420px);
  height: auto;
}

/* Background ring */
.ib-timer .ib-timer-ring-bg {
  stroke: var(--ib-neutral-200);
  stroke-width: 12;
  fill: none;
}

/* Progress ring (animates stroke-dashoffset) */
.ib-timer .ib-timer-ring-prog {
  stroke: var(--ib-primary);
  stroke-width: 12;
  stroke-linecap: round;
  fill: none;
  transform: rotate(-90deg);            /* start at 12 o’clock */
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.2s linear, stroke 0.2s ease;
}

/* Big time in the middle */
.ib-timer .ib-timer-display-big {
  position: absolute;
  top: calc(50% - 0.8rem);
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(3.2rem, 14vw, 6.5rem);
  color: var(--ib-neutral-800);
}

/* Optional secondary line under the big time */
.ib-timer .ib-timer-subtime {
  position: absolute;
  top: calc(50% + 2.6rem);
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight: 600;
  color: var(--ib-neutral-600);
  letter-spacing: .5px;
}

@media (prefers-color-scheme: dark) {
  .ib-timer .ib-timer-display-big { color: var(--ib-primary); }
  .ib-timer .ib-timer-subtime { color: var(--ib-neutral-500); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ib-timer .ib-timer-ring-prog { transition: none; }
}

/* Center the timer face on the page */
.ib-timer .ib-main-card {
  display: flex;
  flex-direction: column;
  align-items: center;     /* centers all inner blocks horizontally */
}

/* Center the ring block itself */
.ib-timer-face {
  margin: var(--ib-space-lg) auto;
}

/* (Keep) SVG sizing — tweak if you want it bigger/smaller */
.ib-timer-svg { width: 320px; height: 320px; }

/* Ring colours (optional, softer bg) */
.ib-timer-ring-bg   { stroke: var(--ib-neutral-200); stroke-width: 12; fill: none; }
.ib-timer-ring-prog { stroke: var(--ib-primary);     stroke-width: 12; fill: none; 
                      stroke-linecap: round; transform: rotate(-90deg); transform-origin: 150px 150px; }

/* Big time in the center */
.ib-timer-display-big {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(3.5rem, 9vw, 6rem);
  color: var(--ib-neutral-800);
}

/* Small sub-line under it */
.ib-timer-subtime {
  position: absolute; top: calc(50% + 36px); left: 50%; transform: translateX(-50%);
  font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight: 600;
  color: var(--ib-neutral-600);
  letter-spacing: .5px;
}