/* ============================================================
   Datamart — DS.Skeleton — loading placeholders (THE RULE).
   Every data-bearing surface (table, board, drawer, card, list)
   renders a skeleton with the SAME layout + metrics while loading,
   so revealing real content causes zero layout shift.

   Shared components own it: pass `loading` to DS.RecordDrawer,
   DS.SegmentScreen / DS.SegmentTable, DS.TaskList. Bespoke
   surfaces compose from DS.Skeleton.* primitives + builders.

   One shimmer, routed through tokens → works in light + dark,
   and falls back to a calm static tint under reduced-motion.
   Pairs with _ds/skeleton.js. Load AFTER colors_and_type.css.
   ============================================================ */
:root {
  --sk-base: color-mix(in srgb, var(--fg) 9%, var(--surface-100));
  --sk-hi: color-mix(in srgb, #fff 60%, transparent);
}
[data-theme="dark"] {
  --sk-base: color-mix(in srgb, #fff 8%, var(--surface-100));
  --sk-hi: color-mix(in srgb, #fff 7%, transparent);
}

@keyframes sk-sweep { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }

.sk {
  display: inline-block;
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, transparent 0%, var(--sk-hi) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: sk-sweep 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  flex: none;
}
.sk[hidden] { display: none; }

/* primitives */
.sk-line { height: 11px; border-radius: var(--radius-pill); }
.sk-line.lg { height: 13px; }
.sk-line.sm { height: 8px; }
.sk-circle { border-radius: 50%; }
.sk-sq { border-radius: var(--radius-sm); }
.sk-pill { height: 18px; border-radius: var(--radius-pill); }
.sk-box { border-radius: var(--radius-md); }
.sk-btn { height: 30px; border-radius: var(--radius-md); }

/* reduced motion → no sweep, just a calm tint */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background-image: none; }
}

/* ---- composed: deal card (kanban) ---- */
.sk-card { background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.sk-card .r { display: flex; align-items: center; gap: var(--sp-3); }

/* ---- composed: task list ---- */
.sk-task { display: flex; align-items: center; gap: var(--sp-3); min-height: 45px; padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border); }

/* ---- composed: drawer ---- */
.sk-kv { display: flex; align-items: center; gap: var(--sp-3); min-height: 34px; }