/* Lab101 / Map of the United States - Global Styles */
:root{
  --primary:#2563EB;
  --secondary:#10B981;
  --bg:#F9FAFB;
  --text:#111827;
  --unselected:#E5E7EB;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.lab101-header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.lab101-header .container{max-width:1100px;margin:0 auto;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lab101-brand{display:flex;flex-direction:column}
.lab101-logo{font-weight:800;letter-spacing:2px;color:var(--primary)}
.lab101-tagline{font-size:12px;color:#6B7280;margin-top:2px}
.lab101-nav{display:flex;gap:16px;flex-wrap:wrap}
.lab101-nav a{color:#374151;font-weight:600}
.lab101-nav a:hover{color:var(--primary)}

/* Footer */
.lab101-footer{background:#111827;color:#E5E7EB;margin-top:40px}
.lab101-footer a{color:#93C5FD}
.lab101-footer .inner{max-width:1100px;margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lab101-footer h4{margin:0 0 8px 0;color:#fff}
.lab101-footer .lab101-network,.lab101-footer .about{display:flex;flex-direction:column;gap:8px}
@media(max-width:800px){.lab101-footer .inner{grid-template-columns:1fr}}

/* Layout */
.container{max-width:1920px;margin:0 auto;padding:16px}
.split{display:grid;grid-template-columns:360px 1fr;gap:24px}
@media(max-width:980px){.split{grid-template-columns:1fr}}

/* Panels */
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px}
.panel h2{margin:0 0 12px 0}
.controls .row{display:flex;gap:12px;align-items:center;margin:10px 0}
.controls label{min-width:120px;color:#374151}
.controls input[type="text"],.controls input[type="color"],.controls textarea{flex:1;padding:10px;border:1px solid #e5e7eb;border-radius:6px}
.controls .presets{display:flex;gap:8px;flex-wrap:wrap}
.color-swatch{width:28px;height:28px;border-radius:6px;border:1px solid #d1d5db;cursor:pointer}
.btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn.secondary{background:var(--secondary)}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Map */
.motus-wrapper{display:flex;flex-direction:column;gap:8px}
.motus-title{font-weight:800;color:#111827}
.motus-map-svg{width:100%;height:auto;display:block}
.state-rect{fill:var(--unselected);stroke:#d1d5db;stroke-width:1;transition:fill .15s ease, filter .15s ease, stroke .15s ease}
.state-path{fill:var(--unselected);stroke:#9ca3af;stroke-width:.6;transition:fill .15s ease, filter .15s ease, stroke .15s ease}
.state-rect.hover,.state-path.hover{filter:brightness(1.05)}
.state-rect.selected,.state-path.selected{fill:var(--primary)}
.state-label{font-size:11px;fill:#fff;pointer-events:none;user-select:none;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.state-label.small{font-size:8px}
.state-label.always{opacity:.95}
.state-label.hover-only{opacity:0;transition:opacity .15s ease}
.state-group:hover .state-label.hover-only{opacity:1}
.state-leader{stroke:#374151;stroke-width:.6;opacity:.9;fill:none}

/* Widget attribution (always visible inside widget) */
.widget-footer{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px}
.widget-footer a{color:#2563EB}

/* Code blocks */
.code-block{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;overflow:auto}
.code-row{display:flex;gap:8px;align-items:center;margin-top:8px}

/* Selected list */
.selected-list{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:4px 10px;font-size:12px}

/* Demo grid */
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.demo-grid{grid-template-columns:1fr}}

/* Live preview area */
.preview-panel{display:flex;flex-direction:column}
.preview-canvas{display:flex;justify-content:center;align-items:center;min-height:935px;padding:16px}
/* Make the map dominate the preview on desktop */
.preview-canvas .motus-map-svg{width:100%;min-width:1254px;max-width:1596px;height:auto;min-height:798px;display:block}
/* Nudge map upward in preview */
.preview-canvas .motus-map-svg{margin-top:-40px}
@media(min-width:1600px){.preview-canvas .motus-map-svg{max-width:1710px}}
/* Responsive: allow smaller screens to shrink without overflow */
@media(max-width:980px){
  .preview-canvas{min-height:520px}
  .preview-canvas .motus-map-svg{min-width:0;width:100%;min-height:0}
}

/* Hero - State Master */
.hero{background:linear-gradient(135deg, rgba(37,99,235,0.08), rgba(16,185,129,0.08));padding:60px 0;border-bottom:1px solid #e5e7eb}
.hero .wrap{max-width:1100px;margin:0 auto;padding:0 16px;text-align:center}
.hero h1{font-size:48px;margin:0 0 16px 0;color:#111827;font-weight:900;line-height:1.1}
.hero .subtitle{font-size:20px;color:#374151;max-width:900px;margin:0 auto 24px auto;line-height:1.5}
.quick-stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:20px 0 32px 0}
.quick-stats div{background:#fff;border:2px solid #e5e7eb;border-radius:999px;padding:10px 16px;font-weight:700;color:#374151;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.cta-large{background:linear-gradient(135deg, #2563EB, #1D4ED8);color:#fff;border:none;border-radius:999px;padding:16px 32px;font-weight:800;cursor:pointer;margin-top:16px;font-size:18px;box-shadow:0 4px 16px rgba(37,99,235,0.3);transition:transform 0.2s ease, box-shadow 0.2s ease}
.cta-large:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4)}
.use-case-tabs{display:inline-flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px}
.use-case-tabs button{border:none;background:transparent;padding:8px 14px;border-radius:999px;font-weight:700;color:#374151;cursor:pointer}
.use-case-tabs button.active{background:#2563EB;color:#fff}
.social-proof{margin-top:16px;color:#374151}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(229,231,235,0.6)}
.stat-card{text-align:center;padding:16px 0;opacity:0.9;transition:opacity 0.3s ease}
.stat-card:hover{opacity:1}
.stat-number{font-size:28px;font-weight:800;color:#2563EB;margin-bottom:6px}
.stat-label{font-size:13px;color:#6B7280;margin:0;font-weight:600;letter-spacing:0.5px}
@media(max-width:768px){.stats-grid{grid-template-columns:1fr;gap:16px;margin-top:32px;padding-top:24px}}
@media(max-width:480px){.stats-grid{gap:12px;margin-top:24px;padding-top:20px}.stat-number{font-size:22px}.stat-label{font-size:12px}}

/* Learning Modes */
#learning-modes{margin-top:0}
#learning-modes .card{text-align:center;padding:24px}
#learning-modes .card h3{font-size:20px;margin-bottom:12px;color:#111827}
#learning-modes .card p{margin-bottom:20px;color:#374151;line-height:1.5}
#learning-modes .btn{width:100%;margin-top:auto}

/* Benefits Section */
.benefits{background:#F9FAFB;padding:48px 0}
.benefits .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.benefits h2{text-align:center;margin-bottom:32px;font-size:32px;color:#111827}
.benefits .card{text-align:center;padding:20px}
.benefits .card h3{font-size:18px;margin-bottom:8px;color:#111827}
.benefits .card p{color:#374151;line-height:1.5;font-size:14px}

/* Content Sections */
.content{background:#fff;padding:48px 0}
.content .wrap{max-width:900px;margin:0 auto;padding:0 16px}
.content h2{margin-top:0;font-size:28px;color:#111827;margin-bottom:24px}
.content h3{font-size:20px;color:#111827;margin-top:32px;margin-bottom:16px}
.content p{color:#374151;line-height:1.6;margin-bottom:16px}
.content ul{color:#374151;line-height:1.6;margin-bottom:20px}
.content li{margin-bottom:8px}

.for-teachers{background:#F9FAFB;padding:48px 0;border-top:1px solid #e5e7eb}
.for-teachers .wrap{max-width:900px;margin:0 auto;padding:0 16px}
.for-teachers h2{text-align:center;margin-bottom:32px;font-size:28px;color:#111827}
.for-teachers h3{font-size:20px;color:#111827;margin-top:24px;margin-bottom:12px}
.for-teachers p{color:#374151;line-height:1.6;margin-bottom:16px}
.for-teachers ul{color:#374151;line-height:1.6;margin-bottom:20px}
.for-teachers li{margin-bottom:6px}

.cross-promo{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;margin:20px 0}
.cross-promo h3{margin:0 0 8px 0;color:#111827}
.cross-promo p{margin:0 0 12px 0;color:#374151}
.cross-promo a{color:#2563EB;font-weight:600}

/* Learning Mode Styles */
.quiz-stats{display:flex;gap:16px;margin:12px 0;font-size:14px;color:#374151}
.quiz-stats div{background:#f8fafc;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb}
.memory-examples{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin:12px 0}
.memory-examples div{margin-bottom:8px;font-size:14px;color:#374151}
.progress-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;font-size:14px;color:#374151}
.progress-stats div{background:#f8fafc;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;text-align:center}
.achievements{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.badge{background:linear-gradient(135deg, #fbbf24, #f59e0b);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;box-shadow:0 2px 4px rgba(251,191,36,0.3)}

/* Controls redesign */
.controls .section{border:1px solid #e5e7eb;border-radius:10px;padding:12px;margin:12px 0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.controls .section h3{display:flex;align-items:center;gap:8px;margin:0 0 8px 0;font-size:16px}
.preset-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#f8fafc;cursor:pointer;font-weight:700}
.pill[data-color]{border-color:transparent}
.tooltip{position:relative}
.tooltip:hover::after{content:attr(data-tip);position:absolute;top:100%;left:0;background:#111827;color:#fff;padding:6px 8px;border-radius:6px;white-space:nowrap;font-size:12px;margin-top:6px}

/* Preview enhancements */
.preview-titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.browser-mock{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,0.12);padding:12px;width:100%}
.browser-chrome{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#ef4444}.dot.yellow{background:#f59e0b}.dot.green{background:#10b981}
.preview-actions{display:flex;align-items:center;gap:8px}
.badge{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:6px 10px;font-size:12px}
.fullscreen-btn{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:8px 10px;font-weight:700;cursor:pointer}

/* Sections below */
.features{background:#fff;padding:48px 0;border-top:1px solid #e5e7eb}
.features .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,0.06);padding:16px}
.card h3{margin:0 0 6px 0}
@media(max-width:980px){.feature-grid{grid-template-columns:1fr}}

.use-cases{background:#F9FAFB;padding:48px 0}
.use-cases .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:980px){.use-grid{grid-template-columns:1fr}}

.testimonials{background:#fff;padding:48px 0}
.testimonials .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.t-grid{grid-template-columns:1fr}}

.faq{background:#F9FAFB;padding:48px 0}
.faq .wrap{max-width:900px;margin:0 auto;padding:0 16px}
.faq h2{text-align:center;margin-bottom:32px;font-size:28px;color:#111827}
.faq h3{font-size:18px;color:#111827;margin-bottom:8px}
.faq p{color:#374151;line-height:1.6;margin-bottom:16px}
.faq-item{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:12px;margin:8px 0}

.cta{background:linear-gradient(135deg,#2563EB, #1D4ED8);color:#fff;padding:40px 16px;text-align:center}
.cta .wrap{max-width:900px;margin:0 auto}
.cta .btn{background:#10B981;border:none}

/* Quiz Animations & Visual Feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.shake-animation { animation: shake 0.3s ease-in-out; }
.pulse-animation { animation: pulse-scale 0.4s ease-out; }

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  pointer-events: none;
}

.toast {
  background: #111827;
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: all;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideInUp 0.3s ease-out;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #10B981; }
.toast.error { background: #EF4444; }
.toast.info { background: #2563EB; }

/* Results Screen */
#quiz-results {
  display: none;
  background: linear-gradient(135deg, #f0f7ff 0%, #f0f9ff 100%);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin-bottom: 32px;
}

.results-score {
  font-size: 48px;
  font-weight: 900;
  color: #2563EB;
  margin: 0 0 12px 0;
}

.results-message {
  font-size: 18px;
  color: #6B7280;
  margin-bottom: 28px;
}

.results-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 32px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
}

.results-stats div {
  font-size: 14px;
  color: #6B7280;
}

.results-stats strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  margin-top: 6px;
}

.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.results-actions .btn {
  min-width: 140px;
}

/* Back Button in Quiz */
.quiz-header-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}

.back-btn {
  background: #fff;
  color: #2563EB;
  border: 1px solid #e5e7eb;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.back-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* State Visualization */
.state-correct {
  fill: #10B981 !important;
  stroke: #059669 !important;
}

.state-incorrect {
  fill: #EF4444 !important;
  stroke: #DC2626 !important;
}

/* X mark for incorrect states */
.state-x-mark {
  font-size: 24px;
  font-weight: 900;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@media(max-width:768px) {
  .results-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .results-actions {
    flex-direction: column;
  }

  .results-actions .btn {
    width: 100%;
  }
}