/* ============================================================
   Materials Studio · Phase 1 MVP · styles.css
   Custom CSS supplementing Tailwind (typography, animations, scrollbars)
   ============================================================ */

[x-cloak] { display: none !important; }

/* Smooth scroll for cards */
html { scroll-behavior: smooth; }

/* Native scrollbar styling (Webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Body font defaults per ui_design_spec.md §2.2 */
body {
  font-family: 'Inter', 'Source Han Sans CN', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.57;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals for data-heavy widgets */
.font-mono, code, pre {
  font-variant-numeric: tabular-nums;
}

/* Line clamp helper (Tailwind v3 already has this, but ensure consistency) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth transitions for tab/panel switches */
[x-transition] { transition: opacity 200ms ease-out, transform 200ms ease-out; }

/* Pulsing dot for AI "思考中" indicator */
@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.pulse-dot {
  animation: pulseDot 1.4s ease-in-out infinite;
}

/* Step indicator label transitions */
.transition-all { transition: all 200ms ease-out; }

/* Customize radio/checkbox accents */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: #F57F17;
  border-color: #F57F17;
}

/* Focus ring globally */
:focus-visible {
  outline: 2px solid #F57F17;
  outline-offset: 2px;
}

/* Modal backdrop blur (for browsers that support it) */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Print styles (just in case) */
@media print {
  body { background: white; }
  .no-print { display: none !important; }
}