/* ═══════════════════════════════════════════════════════
   Density Determination Simulation — Clay Design System Modal Styles
   ═══════════════════════════════════════════════════════ */

/* ── Modal Overlay ── */
.den-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,15,26,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.den-modal-overlay.open { display: flex; }

.den-modal {
  background: var(--canvas, #F4F1FA);
  border-radius: var(--radius-card, 32px);
  padding: 20px;
  width: 100%;
  max-width: 1060px;
  max-height: 94vh;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow-y: auto;
}

.den-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(160,150,180,0.15);
  border-radius: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-muted, #635F69);
  cursor: pointer;
  z-index: 10;
  transition: all var(--dur-fast, 200ms) var(--ease-smooth, cubic-bezier(0.16,1,0.3,1));
  box-shadow: var(--shadow-card, 16px 16px 32px rgba(160,150,180,0.2));
}
.den-modal-close:hover {
  color: var(--accent-rose, #F43F5E);
  background: rgba(255,255,255,1);
}

/* ── Header ── */
.den-header {
  background: linear-gradient(135deg, #1e3a8a, #0e7490);
  color: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.den-header h2 { margin: 0; font-size: 1.2rem; font-family: var(--font-heading); }
.den-header p { margin: 2px 0 0; opacity: .9; font-size: .85rem; }

/* ── Tabs ── */
.den-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.den-tab {
  flex: 1; border: none; padding: 10px; border-radius: 12px; font-size: .9rem; font-weight: 700;
  cursor: pointer; background: #e2e8f0; color: #334155; transition: .2s; font-family: var(--font-heading);
}
.den-tab.active { background: linear-gradient(135deg, #2563eb, #0891b2); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.den-panel { display: none; }
.den-panel.active { display: block; }

/* ── Cards within modal ── */
.den-card {
  background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(2,6,23,.07); border: 1px solid #e2e8f0;
}
.den-card .den-step-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.den-step-n {
  width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex: none;
}
.den-card .den-step-h h3 { margin: 0; font-size: 1rem; font-family: var(--font-heading); }

/* ── Object buttons ── */
.den-obj-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.den-obj-btn {
  border: 2px solid #cbd5e1; background: #f8fafc; border-radius: 12px; padding: 8px 12px;
  font-size: .9rem; cursor: pointer; transition: .15s; font-weight: 600; color: #334155;
  font-family: var(--font-body);
}
.den-obj-btn.active { border-color: #2563eb; background: #dbeafe; color: #1e3a8a; }
.den-obj-btn:hover { transform: translateY(-1px); }

/* ── Hint ── */
.den-hint {
  font-size: .82rem; color: #475569; background: #f1f5f9; border-left: 4px solid #38bdf8;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 8px;
}

/* ── Scene ── */
.den-scene { position: relative; width: 100%; }
.den-scene svg { display: block; width: 100%; height: auto; touch-action: none; border-radius: 8px; background: #f8f7fc; }

/* ── Token ── */
.den-token {
  position: absolute; width: 56px; height: 56px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 30px; cursor: grab;
  background: radial-gradient(circle at 30% 25%, #ffffff, #e2e8f0); border: 2px solid #64748b;
  box-shadow: 0 4px 10px rgba(2,6,23,.25); user-select: none; touch-action: none; z-index: 5;
}
.den-token.den-shape-token { background: none; border: none; box-shadow: none; filter: drop-shadow(0 3px 5px rgba(2,6,23,.3)); }
.den-token:active { cursor: grabbing; }

/* ── Chips ── */
.den-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.den-chip {
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 10px; padding: 5px 10px;
  font-size: .82rem; font-weight: 600; color: #64748b; transition: .2s;
}
.den-chip.den-done { background: #dcfce7; border-color: #22c55e; color: #166534; }
.den-chip b { color: inherit; }

/* ── Buttons ── */
.den-btn {
  border: none; border-radius: var(--radius-btn, 20px); padding: 8px 14px; font-weight: 700; cursor: pointer;
  font-size: .85rem; transition: .15s; margin: 4px 4px 0 0; font-family: var(--font-body); line-height: 1;
}
.den-btn-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }
.den-btn-blue:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover, 16px 16px 32px rgba(139,92,246,0.35)); }
.den-btn-gray { background: #e2e8f0; color: #334155; }
.den-btn-gray:hover { background: #cbd5e1; }
.den-btn-green { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; }
.den-btn-green:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover, 16px 16px 32px rgba(139,92,246,0.35)); }
.den-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Readouts ── */
.den-readouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.den-ro {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 10px;
}
.den-ro span { display: block; font-size: .7rem; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.den-ro b { font-size: 1rem; color: #0f172a; }

/* ── Calculation result ── */
.den-calc {
  margin-top: 10px; background: linear-gradient(135deg, #f0fdf4, #ecfeff); border: 1px solid #86efac;
  border-radius: 12px; padding: 12px; display: none; line-height: 1.6;
}
.den-calc.show { display: block; }
.den-calc .den-row { font-size: .9rem; }
.den-calc .den-res { font-size: 1.1rem; font-weight: 800; color: #166534; margin-top: 4px; }
.den-calc .den-mat { margin-top: 4px; font-weight: 700; color: #0e7490; }

/* ── Details ── */
.den-details { margin-top: 4px; }
.den-details summary { cursor: pointer; font-weight: 700; color: #1e3a8a; padding: 4px 0; font-size: .85rem; }
.den-meth { font-size: .82rem; color: #334155; line-height: 1.5; }
.den-meth li { margin-bottom: 4px; }

/* ── Scrollbar ── */
.den-modal::-webkit-scrollbar { width: 6px; }
.den-modal::-webkit-scrollbar-track { background: transparent; }
.den-modal::-webkit-scrollbar-thumb { background: rgba(160,150,180,0.3); border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .den-readouts { grid-template-columns: 1fr 1fr; }
  .den-header h2 { font-size: 1.05rem; }
}