/**
 * Eco Touch — phone/tablet layout overrides.
 */

html,
body.eco-touch {
  height: 100%;
  overscroll-behavior: none;
}

body.eco-touch {
  min-height: 100dvh;
}

body.eco-touch .eco-app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.65rem max(1rem, env(safe-area-inset-bottom));
  gap: 0.65rem;
  justify-content: flex-start;
}

.touch-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

body.eco-touch .app-title {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  text-align: left;
}

body.eco-touch .intro-actions {
  margin: 0;
  gap: 0.2rem;
}

body.eco-touch .icon-btn {
  min-width: 44px;
  min-height: 44px;
  color: var(--filipe-text-muted);
}

body.eco-touch .icon-btn:hover,
body.eco-touch .icon-btn[aria-pressed="true"] {
  color: var(--filipe-text);
}

body.eco-touch .icon-btn[aria-pressed="true"] {
  color: var(--filipe-accent);
}

body.eco-touch .instructions {
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  gap: 0.25rem;
  flex: none;
  width: 100%;
  max-width: none;
}

.sample-status-line {
  margin: 0;
  font-family: var(--filipe-font-mono);
  font-size: 0.8rem;
  color: var(--filipe-text-muted);
  text-align: center;
  min-height: 1.1em;
}

.sample-status-line.is-error {
  color: var(--filipe-record-active);
}

.sample-status-line.is-loading {
  color: var(--filipe-accent);
}

body.eco-touch .canvas-stage {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.eco-touch #canvas-container canvas {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.eco-touch .welcome-start {
  min-height: 52px;
  min-width: 10rem;
  font-size: 1.05rem;
}

body.eco-touch .help-modal {
  width: min(92vw, 520px);
  max-height: min(85dvh, 640px);
  overflow: auto;
  padding: 1.25rem 1.35rem 1.5rem;
}

@media (orientation: landscape) and (max-height: 500px) {
  body.eco-touch .instructions {
    display: none;
  }

  body.eco-touch .eco-app {
    gap: 0.35rem;
    padding-top: 0.35rem;
  }
}