/* menu_landing_html (client_code/main/menu_landing_html). Every rule is scoped
   :where(.ch-menu-root), the form's private root around the .ch-menu container, which adds
   no specificity. No rule here ties with another sheet: nothing else in the app, the
   dependency's injected theme or main/shell.css names a .ch-menu* class or
   #ch-menu-no-homes. */

:where(.ch-menu-root) .ch-menu {
  padding: var(--ch-space-lg);
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--ch-font-primary);
  background: var(--ch-bg-primary);
  min-height: 100vh;
  box-sizing: border-box;
}

:where(.ch-menu-root) .ch-menu-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ch-space-md);
}

:where(.ch-menu-root) .ch-menu-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ch-space-sm);
  width: 100%;
  padding: var(--ch-space-lg);
  font-family: var(--ch-font-primary);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  background: var(--ch-bg-card);
  color: var(--ch-text-primary);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  box-shadow: var(--ch-shadow-sm);
  cursor: pointer;
  transition: background-color var(--ch-transition-fast), color var(--ch-transition-fast), border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
}

:where(.ch-menu-root) .ch-menu-tile:hover {
  background: var(--ch-accent-secondary);
  color: var(--ch-accent-primary-text);
  border-color: var(--ch-accent-primary);
  box-shadow: var(--ch-shadow-md);
}

:where(.ch-menu-root) .ch-menu-tile:focus-visible {
  outline: 2px solid var(--ch-border-focus);
  outline-offset: 2px;
}

/* Inert while a destination's browser library downloads. Visibly
   inert, not merely unclickable: a tile that looks live and does
   nothing reads as a hang. */
:where(.ch-menu-root) .ch-menu-tile:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: var(--ch-shadow-sm);
}

:where(.ch-menu-root) .ch-menu-tile:disabled:hover {
  background: var(--ch-bg-card);
  color: var(--ch-text-primary);
  border-color: var(--ch-border);
}

:where(.ch-menu-root) .ch-menu-tile .material-symbols-outlined {
  font-size: 32px;
  color: var(--ch-accent-primary);
}

:where(.ch-menu-root) .ch-menu-empty {
  font-size: 15px;
  color: var(--ch-text-secondary);
}

:where(.ch-menu-root) #ch-menu-no-homes {
  margin-bottom: var(--ch-space-md);
}

@media (max-width: 768px) {
  :where(.ch-menu-root) .ch-menu {
    padding: var(--ch-space-md);
  }
}