@import "./assets/depth-tokens.css";

/* Quiet survey materials. Native geometry and every warning remain intact. */
body.mf-depth-art .hud-panel,
body.mf-depth-art .board-wrap {
  background-color: var(--mf-art-navy);
  background-image: url("./assets/depth-chart-edges.svg");
}
/* Exempt original hover/active and chord hint backgrounds from neutral metal. */
body.mf-depth-art .cell.is-hidden:not(.is-hint):not(:hover):not(:active),
body.mf-depth-art .cell.is-flagged:not(.is-wrong-flag) {
  background-color: var(--mf-art-metal);
  background-image: url("./assets/depth-survey-metal.svg");
}
body.mf-depth-art .diff-tab,
body.mf-depth-art .mode-btn,
body.mf-depth-art .btn-tool,
body.mf-depth-art .btn-status,
body.mf-depth-art .btn-primary,
body.mf-depth-art .btn-secondary,
body.mf-depth-art .btn-danger-outline,
body.mf-depth-art .clue-launch button,
body.mf-depth-art .clue-desk button,
body.mf-depth-art .clue-desk select {
  min-height: var(--mf-art-touch);
  min-width: var(--mf-art-touch);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.mf-depth-art .btn-tool { justify-content: center; }
body.mf-depth-art .mode-panel { flex-wrap: wrap; gap: var(--mf-art-space-2); }
body.mf-depth-art .mode-toggle { min-width: 0; }
body.mf-depth-art .tool-actions { flex-wrap: wrap; }
body.mf-depth-art .hud-meta,
body.mf-depth-art .how-line { color: var(--mf-art-muted); overflow-wrap: anywhere; }
body.mf-depth-art .sheet-title,
body.mf-depth-art .sheet-kicker,
body.mf-depth-art .stat-card-sub { overflow-wrap: anywhere; }
body.mf-depth-art .sheet-actions { flex-wrap: wrap; }
body.mf-depth-art .sheet-actions button { flex: 1 1 9rem; }
body.mf-depth-art .overlay { overflow-y: auto; }
body.mf-depth-art { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 420px) {
  body.mf-depth-art .mode-toggle { flex: 1 1 100%; }
  body.mf-depth-art .tool-actions { width: 100%; justify-content: center; }
  body.mf-depth-art .hub-bar { flex-wrap: wrap; gap: var(--mf-art-space-1); }
}
@media (prefers-reduced-motion: reduce) {
  body.mf-depth-art .diff-tab,
  body.mf-depth-art .mode-btn,
  body.mf-depth-art .btn-tool,
  body.mf-depth-art .btn-status,
  body.mf-depth-art .btn-primary,
  body.mf-depth-art .btn-secondary { transition: none; }
}