/* Kept separate so the mobile action sheet always wins over legacy layout rules. */
@media (max-width: 700px) {
  .hnum-converter > .hnum-panel { display: none !important; }
  .hnum-converter.is-mobile-settings-open > .hnum-panel {
    background: #fffafb; border: 1px solid #dec6ce; border-bottom: 0;
    border-radius: 18px 18px 0 0; bottom: 58px; box-shadow: 0 -14px 34px rgba(50,31,38,.18);
    display: block !important; left: 0; max-height: min(72dvh, 560px); overflow: auto;
    padding: 12px; position: fixed; right: 0; z-index: 100000;
  }
  .hnum-mobile-settings-close { background: #fff; border: 1px solid #a27d8a; border-radius: 999px; color: #864d61; display: block; font: inherit; font-size: 12px; font-weight: 800; margin: 0 0 10px auto; min-height: 34px; padding: 5px 12px; }
  .hnum-converter.is-mobile-settings-open .hnum-controls { display: grid !important; }
  .hnum-converter.is-mobile-settings-open .hnum-controls > * { display: none; }
  .hnum-converter.is-mobile-settings-open .hnum-controls > .hnum-smart-map-card,
  .hnum-converter.is-mobile-settings-open .hnum-controls > .hnum-field:has(.hnum-board-size),
  .hnum-converter.is-mobile-settings-open .hnum-controls > .hnum-field:has(.hnum-color-count),
  .hnum-converter.is-mobile-settings-open .hnum-controls > .hnum-field:has(.hnum-palette) { display: block; }
  .hnum-converter.is-mobile-settings-open .hnum-advanced-details { display: block; }
  .hnum-converter.is-mobile-settings-open .hnum-summary { display: none; }
  .hnum-converter:not(.is-edit-studio) .hnum-map-edit-panel { display: none; }
  .hnum-converter.is-edit-studio .hnum-map-edit-panel { display: flex !important; }
  .hnum-download-under-map { display: none !important; }
  .hnum-mobile-nav { grid-template-columns: repeat(3, 1fr); }
  .hnum-mobile-nav button:nth-child(2) { background: var(--hnum-accent); border-radius: 999px; color: #fff; }
  .hnum-mobile-nav .hnum-mobile-settings[aria-expanded="true"] { background: #f4e3e9; border-radius: 999px; color: #864d61; }
}