/* ============================================================
   DENSE.CSS — motion + data-density primitives for mockups.
   Use these to make pages feel like a product, not a Figma file.
   ============================================================ */

/* ---------- Headshots (deterministic gradient avatars) ---------- */
.headshot {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
  font-family: var(--font);
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #4F46E5, #ec4899);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 2px white;
}
.headshot.xs  { width: 22px; height: 22px; font-size: 9px; }
.headshot.sm  { width: 28px; height: 28px; font-size: 10px; }
.headshot.lg  { width: 48px; height: 48px; font-size: 16px; }
.headshot.xl  { width: 72px; height: 72px; font-size: 22px; }
.headshot.h-1 { background: linear-gradient(135deg, #4F46E5, #ec4899); }
.headshot.h-2 { background: linear-gradient(135deg, #f97316, #dc2626); }
.headshot.h-3 { background: linear-gradient(135deg, #2a9d60, #06b6d4); }
.headshot.h-4 { background: linear-gradient(135deg, #fbbf24, #f97316); }
.headshot.h-5 { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.headshot.h-6 { background: linear-gradient(135deg, #06b6d4, #4F46E5); }
.headshot.h-7 { background: linear-gradient(135deg, #16a34a, #84cc16); }
.headshot.h-8 { background: linear-gradient(135deg, #ec4899, #fbbf24); }
.headshot.h-9 { background: linear-gradient(135deg, #18181b, #4F46E5); }
.headshot.h-10 { background: linear-gradient(135deg, #475569, #94a3b8); }

/* Avatar stack (overlapping) */
.av-stack { display: inline-flex; align-items: center; }
.av-stack .headshot { margin-left: -8px; box-shadow: 0 0 0 2px white, 0 1px 3px rgba(0,0,0,0.06); }
.av-stack .headshot:first-child { margin-left: 0; }
.av-stack .more {
  margin-left: -8px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 10px; font-weight: 700;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px white;
}

/* ---------- Live status pills + dots ---------- */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(42, 157, 96, 0.55);
  animation: live-pulse 2s infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.live-dot.red { background: var(--red); animation-name: live-pulse-red; }
.live-dot.amber { background: var(--amber); animation-name: live-pulse-amber; }
.live-dot.purple { background: var(--purple); animation-name: live-pulse-purple; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42,157,96,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(42,157,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,157,96,0); }
}
@keyframes live-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
@keyframes live-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@keyframes live-pulse-purple {
  0%   { box-shadow: 0 0 0 0 rgba(79,70,229,0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(79,70,229,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); }
}

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--gray-100); color: var(--gray-700);
}
.pill.green  { background: #d1fae5; color: #047857; }
.pill.amber  { background: #fef3c7; color: #92400e; }
.pill.red    { background: #fee2e2; color: #b91c1c; }
.pill.purple { background: #ede9fe; color: #5b21b6; }
.pill.blue   { background: #dbeafe; color: #1e40af; }
.pill.cyan   { background: #cffafe; color: #155e75; }
.pill.pink   { background: #fce7f3; color: #9d174d; }
.pill.dark   { background: #18181b; color: white; }
.pill.outline { background: white; border: 1px solid var(--gray-200); color: var(--gray-700); }

/* ---------- Sparklines + tiny charts (CSS only) ---------- */
.spark {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  width: 80px;
}
.spark.lg { height: 40px; width: 140px; }

/* CSS bar chart */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.bars .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--purple), #818cf8);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  position: relative;
  transition: opacity 0.15s;
}
.bars .bar:hover { opacity: 0.85; }
.bars.green .bar { background: linear-gradient(180deg, #2a9d60, #6ee7b7); }
.bars.pink .bar  { background: linear-gradient(180deg, #ec4899, #fbcfe8); }
.bars.amber .bar { background: linear-gradient(180deg, #f59e0b, #fde68a); }
.bars.cyan .bar  { background: linear-gradient(180deg, #06b6d4, #a5f3fc); }

/* ---------- Counter that animates (use data-count) ---------- */
.counter {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---------- Activity ticker ---------- */
.ticker {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  height: 32px;
}
.ticker-track {
  display: flex; align-items: center; gap: 32px;
  padding: 0 16px; height: 100%;
  white-space: nowrap;
  animation: ticker-scroll 36s linear infinite;
  font-size: 12px; color: var(--gray-700);
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-track .item { display: inline-flex; align-items: center; gap: 6px; }
.ticker-track .item .who { font-weight: 700; color: var(--gray-900); }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Sticky data tables ---------- */
.dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.dtable thead th {
  position: sticky; top: 0;
  background: var(--gray-50);
  text-align: left;
  padding: 10px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  font-weight: 700;
  border-bottom: 1px solid var(--gray-200);
  z-index: 2;
}
.dtable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.dtable tbody tr {
  transition: background 0.12s;
}
.dtable tbody tr:hover { background: var(--gray-50); }
.dtable tbody tr.hot { background: linear-gradient(90deg, #fef3c7 0%, transparent 80%); }
.dtable .num { font-variant-numeric: tabular-nums; text-align: right; }
.dtable .delta-up   { color: var(--green); font-weight: 700; }
.dtable .delta-down { color: var(--red); font-weight: 700; }

/* ---------- Hover lift (apply to any clickable card) ---------- */
.lift {
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s;
  cursor: default;
  will-change: transform;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15,12,50,0.10), 0 4px 10px rgba(15,12,50,0.05);
}

/* ---------- Reveal-on-scroll (no JS needed if you set animation-timeline) ---------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes reveal-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Toast / notification card ---------- */
.toast-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: white;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--purple);
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15,12,50,0.06);
  font-size: 13px;
}
.toast-card.green { border-left-color: var(--green); }
.toast-card.red   { border-left-color: var(--red); }
.toast-card.amber { border-left-color: var(--amber); }
.toast-card .toast-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100);
  font-size: 14px;
}
.toast-card .toast-body { flex: 1; }
.toast-card .toast-body .who { font-weight: 700; color: var(--gray-900); }
.toast-card .toast-body .ts { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* ---------- Kanban / column board ---------- */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.kanban .col {
  background: var(--gray-50);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 320px;
}
.kanban .col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px 8px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray-700);
  border-bottom: 1px dashed var(--gray-200);
}
.kanban .col-head .ct {
  background: white;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--gray-700);
  font-weight: 700;
  border: 1px solid var(--gray-200);
}
.kanban .kcard {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid var(--gray-200);
  cursor: default;
  box-shadow: 0 1px 1px rgba(0,0,0,0.02);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kanban .kcard:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.kanban .kcard .kcard-meta {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px; flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--gray-500);
}

/* ---------- Sidebar shell (for mockups using a settings-style layout) ---------- */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  min-height: 540px;
}
.shell-side {
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  padding: 18px 12px;
}
.shell-side .grouping {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  font-weight: 700;
  padding: 12px 12px 6px;
}
.shell-side .nav-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--gray-700);
  cursor: default;
}
.shell-side .nav-row .ico { font-size: 14px; opacity: 0.85; width: 18px; }
.shell-side .nav-row:hover { background: var(--gray-100); }
.shell-side .nav-row.active {
  background: var(--white);
  color: var(--gray-900);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shell-side .nav-row .badge-mini {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 1px 6px;
  border-radius: 999px;
}
.shell-side .nav-row.active .badge-mini { background: var(--purple); color: white; }
.shell-main { padding: 24px 28px; overflow: hidden; }

/* ---------- Multi-pane layout (sidebar + main + right rail) ---------- */
.three-pane {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 18px;
  align-items: start;
}

/* ---------- Realistic property listing card ---------- */
.listing-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.listing-card .photo {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #94a3b8, #475569);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.listing-card .photo .price {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px; font-weight: 700;
}
.listing-card .photo .badge-mini {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--green); color: white;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listing-card .body {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.listing-card .body .addr {
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}
.listing-card .body .stats {
  font-size: 11.5px;
  color: var(--gray-500);
}

/* Listing card photo color variants */
.listing-card .photo.l1 { background: linear-gradient(135deg, #94a3b8, #1e293b); }
.listing-card .photo.l2 { background: linear-gradient(135deg, #fbbf24, #92400e); }
.listing-card .photo.l3 { background: linear-gradient(135deg, #84cc16, #15803d); }
.listing-card .photo.l4 { background: linear-gradient(135deg, #fb7185, #881337); }
.listing-card .photo.l5 { background: linear-gradient(135deg, #38bdf8, #1e40af); }
.listing-card .photo.l6 { background: linear-gradient(135deg, #c4b5fd, #4c1d95); }

/* ---------- Number readouts (KPI tile) ---------- */
.kpi {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 6px;
}
.kpi .val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.kpi .delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 4px;
}
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }
.kpi .accent-bar {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), #ec4899);
}
.kpi.green .accent-bar { background: linear-gradient(90deg, var(--green), #06b6d4); }
.kpi.amber .accent-bar { background: linear-gradient(90deg, #fbbf24, #f97316); }
.kpi.pink  .accent-bar { background: linear-gradient(90deg, #ec4899, #f43f5e); }
.kpi.cyan  .accent-bar { background: linear-gradient(90deg, #06b6d4, #4F46E5); }

/* ---------- Comparison: BEFORE / AFTER ---------- */
.compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.compare .side {
  padding: 24px;
  position: relative;
}
.compare .side.before { background: var(--gray-50); }
.compare .side.after  {
  background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
  border-left: 1px solid var(--gray-200);
}
.compare .side .ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.compare .side.before .ribbon { background: var(--gray-200); color: var(--gray-700); }
.compare .side.after  .ribbon { background: linear-gradient(90deg, #4F46E5, #ec4899); color: white; }

/* ---------- Step / process strip ---------- */
.steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--gray-50);
  border-radius: 14px;
  padding: 4px;
  border: 1px solid var(--gray-200);
}
.steps .step {
  flex: 1;
  background: white;
  margin: 0 2px;
  padding: 14px 16px;
  border-radius: 10px;
  position: relative;
  transition: transform 0.15s;
}
.steps .step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 11px; font-weight: 800;
  margin-bottom: 6px;
}
.steps .step.done .n { background: var(--green); color: white; }
.steps .step.active { box-shadow: 0 0 0 2px var(--purple); }
.steps .step.active .n { background: var(--purple); color: white; }
.steps .step h4 {
  font-size: 13px;
  margin: 4px 0 4px;
  text-transform: none; letter-spacing: normal;
}
.steps .step p { font-size: 11.5px; color: var(--gray-500); margin: 0; line-height: 1.5; }

/* ---------- Inbox row (dense list item) ---------- */
.inbox-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  background: white;
  cursor: default;
  transition: background 0.12s;
}
.inbox-row:hover { background: var(--gray-50); }
.inbox-row.unread { background: linear-gradient(90deg, rgba(79,70,229,0.04), transparent 25%); }
.inbox-row.unread .who { color: var(--gray-900); font-weight: 700; }
.inbox-row .pin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); justify-self: center; }
.inbox-row.unread .pin-dot { opacity: 1; }
.inbox-row:not(.unread) .pin-dot { opacity: 0; }
.inbox-row .who { font-size: 12.5px; color: var(--gray-700); }
.inbox-row .body { font-size: 12.5px; color: var(--gray-700); }
.inbox-row .body .subj { font-weight: 600; color: var(--gray-900); }
.inbox-row .ts { font-size: 11px; color: var(--gray-500); white-space: nowrap; }

/* ---------- "Live now" banner ---------- */
.live-banner {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #dc2626, #ec4899);
  color: white;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.live-banner .live-dot {
  background: white; margin: 0;
  animation: live-pulse-white 1.5s infinite;
}
@keyframes live-pulse-white {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}