/* ============================================================
   Visual Timer — floating countdown widget
   ============================================================ */

.visual-timer {
    position: fixed;
    top: 80px;
    right: 24px;
    width: 220px;
    background: var(--bg-surface, #16161e);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 10005;
    font-family: 'Outfit', system-ui, sans-serif;
    color: var(--text-primary, #e0e2ea);
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
}
.visual-timer.hidden { display: none; }

/* Minimized: only display + expand/close visible */
.visual-timer.minimized .timer-body,
.visual-timer.minimized .timer-settings-panel { display: none; }
.visual-timer.minimized .timer-title,
.visual-timer.minimized #timer-settings-btn { display: none; }
.visual-timer.minimized .timer-header { border-bottom: none; padding: 6px 10px 0; justify-content: flex-end; }
.visual-timer.minimized .timer-display { padding: 4px 0 8px; }
.visual-timer.minimized { width: 180px; }

/* ── Header ── */
.timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.timer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #eee);
}
.timer-header-btns {
    display: flex;
    gap: 4px;
}
.timer-header-btn {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.timer-header-btn:hover {
    color: var(--text-primary, #eee);
    background: rgba(255, 255, 255, 0.06);
}
.timer-close:hover { color: #ef4444; }

/* ── Display area ── */
.timer-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    position: relative;
    min-height: 160px;
}
#timer-ring {
    width: 160px;
    height: 160px;
}
.timer-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #eee);
    letter-spacing: 1px;
}
.timer-time.hidden { display: none; }

/* Dismiss/STOP button */
.timer-dismiss-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
    animation: timer-stop-pulse 1s ease-in-out infinite;
    z-index: 2;
}
.timer-dismiss-btn.hidden { display: none; }
@keyframes timer-stop-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
}

/* Display mode toggles */
.visual-timer.ring-hidden #timer-ring { display: none; }
.visual-timer.ring-hidden .timer-display { min-height: 60px; padding: 20px 0; }
.visual-timer.ring-hidden .timer-time { position: relative; top: auto; left: auto; transform: none; font-size: 40px; }
.visual-timer.numbers-hidden .timer-time { display: none; }

/* ── Body: presets, custom, controls ── */
.timer-body {
    padding: 10px 14px 14px;
}

/* Presets */
.timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.timer-preset {
    flex: 1;
    min-width: 42px;
    padding: 6px 4px;
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #333);
    border-radius: 6px;
    color: var(--text-primary, #ccc);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.timer-preset:hover {
    border-color: var(--accent, #4a9eff);
    color: var(--accent, #4a9eff);
}
.timer-preset.active {
    background: rgba(74, 158, 255, 0.15);
    border-color: var(--accent, #4a9eff);
    color: var(--accent, #4a9eff);
}

/* Custom time input */
.timer-custom {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}
.timer-input {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #333);
    border-radius: 6px;
    color: var(--text-primary, #eee);
    font-size: 13px;
    text-align: center;
    outline: none;
    width: 50px;
    -moz-appearance: textfield;
}
.timer-input::-webkit-inner-spin-button,
.timer-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.timer-input:focus { border-color: var(--accent, #4a9eff); }
.timer-colon {
    color: var(--text-muted, #888);
    font-size: 16px;
    font-weight: 600;
}
.timer-set-btn {
    padding: 6px 12px;
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #333);
    border-radius: 6px;
    color: var(--text-primary, #ccc);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.timer-set-btn:hover {
    border-color: var(--accent, #4a9eff);
    color: var(--accent, #4a9eff);
}

/* Controls */
.timer-controls {
    display: flex;
    gap: 6px;
}
.timer-ctrl {
    flex: 1;
    padding: 8px 12px;
    background: var(--accent, #4a9eff);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.timer-ctrl:hover { filter: brightness(1.1); }
.timer-ctrl:active { transform: scale(0.97); }
.timer-ctrl-secondary {
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #333);
    color: var(--text-muted, #888);
}
.timer-ctrl-secondary:hover {
    border-color: var(--text-muted, #666);
    color: var(--text-primary, #eee);
    filter: none;
}

/* ── Settings panel ── */
.timer-settings-panel {
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.timer-settings-panel.hidden { display: none; }
.timer-settings-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.timer-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    font-size: 13px;
    color: var(--text-primary, #ddd);
    cursor: pointer;
}
.timer-setting-row input[type="radio"] {
    accent-color: var(--accent, #4a9eff);
    cursor: pointer;
}

/* ── Alarm flash ── */
.timer-flash {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    z-index: 1;
}
.timer-flash.flashing {
    animation: timer-flash-anim 0.6s ease-in-out infinite alternate;
}
@keyframes timer-flash-anim {
    0% { background: transparent; }
    100% { background: rgba(74, 158, 255, 0.08); box-shadow: inset 0 0 20px rgba(74, 158, 255, 0.15); }
}

/* ── Done state ── */
.visual-timer.timer-done {
    border-color: var(--accent, #4a9eff);
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Light mode ── */
body.light-mode .visual-timer {
    background: #fff;
    border-color: #dde0e6;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light-mode .timer-header { border-bottom-color: #eee; }
body.light-mode .timer-preset { background: #f5f5fa; border-color: #ddd; color: #555; }
body.light-mode .timer-input { background: #f5f5fa; border-color: #ddd; color: #333; }
body.light-mode .timer-set-btn { background: #f5f5fa; border-color: #ddd; color: #555; }
body.light-mode .timer-ctrl-secondary { background: #f5f5fa; border-color: #ddd; color: #888; }

/* ============================================================
   Tectonian Tutorial — Coach Marks Overlay
   ============================================================ */

/* --- Backdrop: full-screen dim layer --- */
.tutorial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: all;
}
.tutorial-backdrop.visible { opacity: 1; }

/* --- Spotlight ring --- */
.tutorial-spotlight {
  position: fixed;
  z-index: 10001;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.7),
              0 0 24px 4px rgba(99, 102, 241, 0.25);
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tutorial-spotlight.hidden { display: none; }

.tutorial-spotlight.pulse {
  animation: tutorial-pulse 2s ease-in-out infinite;
}
@keyframes tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.7), 0 0 24px 4px rgba(99, 102, 241, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.9), 0 0 32px 8px rgba(99, 102, 241, 0.35); }
}

/* --- Elevated target (above backdrop, receives clicks) --- */
.tutorial-target {
  position: relative !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.tutorial-canvas-elevated {
  position: relative !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

/* --- Tooltip card --- */
.tutorial-tooltip {
  position: fixed;
  z-index: 10003;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bg-surface, #16161e);
  color: var(--text-primary, #e0e2ea);
  border: 1px solid var(--border, #2a2a3a);
  border-radius: 12px;
  padding: 20px 22px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tutorial-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.tutorial-tooltip.modal-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 400px;
}
.tutorial-tooltip.modal-center.visible {
  transform: translate(-50%, -50%) !important;
}

/* --- Tooltip arrow --- */
.tutorial-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-surface, #16161e);
  border: 1px solid var(--border, #2a2a3a);
  transform: rotate(45deg);
}
.tutorial-arrow.arrow-top    { top: -7px; left: 24px; border-bottom: none; border-right: none; }
.tutorial-arrow.arrow-bottom { bottom: -7px; left: 24px; border-top: none; border-left: none; }
.tutorial-arrow.arrow-left   { left: -7px; top: 24px; border-top: none; border-right: none; }
.tutorial-arrow.arrow-right  { right: -7px; top: 24px; border-bottom: none; border-left: none; }
.tutorial-tooltip.modal-center .tutorial-arrow { display: none; }

/* --- Inner elements --- */
.tutorial-step-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent, #4a9eff);
  margin-bottom: 6px;
  opacity: 0.8;
}

.tutorial-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.tutorial-body {
  color: var(--text-muted, #888);
  margin: 0 0 16px 0;
}
.tutorial-body kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #d4d4f0;
}

/* --- Buttons row --- */
.tutorial-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tutorial-btn-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tutorial-btn-prev {
  padding: 7px 12px;
  background: none;
  color: var(--text-muted, #888);
  border: 1px solid var(--border, #2a2a3a);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tutorial-btn-prev:hover {
  color: var(--text-primary, #e0e2ea);
  border-color: var(--text-muted, #888);
}

.tutorial-btn-primary {
  padding: 8px 20px;
  background: var(--accent, #4a9eff);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.tutorial-btn-primary:hover { filter: brightness(1.1); }
.tutorial-btn-primary:active { transform: scale(0.97); }

.tutorial-btn-skip {
  padding: 6px 12px;
  background: none;
  color: var(--text-muted, #888);
  border: none;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tutorial-btn-skip:hover { color: var(--text-primary, #e0e2ea); }

/* --- Progress bar --- */
.tutorial-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}
.tutorial-progress-fill {
  height: 100%;
  background: var(--accent, #4a9eff);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* --- Light mode support --- */
body.light-mode .tutorial-tooltip {
  background: #fff;
  border-color: #dde0e6;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.light-mode .tutorial-title { color: #1a1a2e; }
body.light-mode .tutorial-body { color: #555; }
body.light-mode .tutorial-arrow {
  background: #fff;
  border-color: #dde0e6;
}
body.light-mode .tutorial-body kbd {
  background: #f0f0f5;
  border-color: #ddd;
  color: #333;
}
body.light-mode .tutorial-progress { background: #e8e8f0; }
body.light-mode .tutorial-btn-prev { border-color: #dde0e6; color: #888; }
body.light-mode .tutorial-btn-prev:hover { border-color: #aaa; color: #333; }
body.light-mode .tutorial-backdrop { background: rgba(0, 0, 0, 0.35); }

/* --- Responsive --- */
@media (max-width: 480px) {
  .tutorial-tooltip {
    width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px !important;
  }
  .tutorial-tooltip.modal-center { width: calc(100vw - 24px); }
  .tutorial-arrow { display: none; }
}