/* data-dance.css — the "liberation of your data" panel. lives inside the settings bean (.tutor-settings).
   tokens only. the pickers are physical objects (mass + a 3px floor), per IC. */

.dd { display: flex; flex-direction: column; gap: var(--space-sm); }

.dd-title { font-weight: 800; font-size: 1.02em; color: var(--text); letter-spacing: 0.01em; }
.dd-sub { font-weight: 400; color: var(--muted); }

.dd-lede { margin: 0; color: var(--text); font-style: italic; line-height: 1.5; }

.dd-move {
  margin: 0; padding: var(--space-sm) var(--space-md);
  color: var(--text); line-height: 1.5;
  background: var(--surface); border-left: 3px solid var(--line); border-radius: var(--r-sm);
}
.dd-move b { color: var(--text); }
.dd-mercy { border-left-color: var(--accent, #7a6cff); }
.dd-drop  { border-left-color: var(--accent, #7a6cff); background: color-mix(in srgb, var(--accent, #7a6cff) 10%, var(--surface)); }

.dd-pickers { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }

.dd-pick {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-sm) var(--space-md); cursor: pointer;
  background: var(--btn, var(--surface)); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 3px 0 var(--btn-sh, var(--line));   /* mass */
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.dd-pick:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-sh, var(--line)); }
.dd-pick:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-sh, var(--line)); }
.dd-pick-name { font-weight: 700; }
.dd-pick-hint { font-size: 0.85em; color: var(--muted); }

.dd-soon { cursor: default; opacity: 0.5; box-shadow: none; }
.dd-soon:hover { transform: none; box-shadow: none; }

.dd-msg { min-height: 1.2em; font-size: 0.92em; line-height: 1.45; }
.dd-msg.ok   { color: var(--ok, #2e9e5b); }
.dd-msg.warn { color: var(--warn, #c2410c); }

.dd-foot { margin: var(--space-sm) 0 0; font-style: italic; color: var(--muted); text-align: center; }
