/* Phone-only overrides keep the approved desktop presentation intact. */
html[data-phone-layout] {
  --phone-safe-top: env(safe-area-inset-top, 0px);
  --phone-safe-right: env(safe-area-inset-right, 0px);
  --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
  --phone-safe-left: env(safe-area-inset-left, 0px);
}

html[data-phone-layout],
html[data-phone-layout] body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html[data-phone-layout] .app-shell {
  --rail-width: clamp(184px, 28%, 240px);
  --layout-gap: 12px;
  position: relative;
  top: auto;
  left: auto;
  width: 100dvw;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: 26px minmax(0, 1fr) 28px;
  gap: 4px;
  padding: max(4px, var(--phone-safe-top)) max(8px, var(--phone-safe-right)) max(8px, var(--phone-safe-bottom)) max(8px, var(--phone-safe-left));
  transform: none;
  container-type: size;
}

html[data-phone-layout] .product-lockup strong { font-size: 18px; }
html[data-phone-layout] .brand-logo { width: 112px; height: 28px; }
html[data-phone-layout] .simulator-layout { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
html[data-phone-layout] .panel-workbench { grid-template-rows: minmax(0, 1fr) auto; gap: 4px; container: phone-workbench / inline-size; }
html[data-phone-layout] .panel-stage { container-type: size; }
html[data-phone-layout] .panel-scroll { height: 100%; }
html[data-phone-layout] .panel { width: min(100%, calc(100cqh * 1.628)); }
html[data-phone-layout] .panel-hit { min-height: 38px; }
html[data-phone-layout] .hit-power { width: 7.5%; }
html[data-phone-layout] .long-press-legend { min-height: 22px; gap: 6px; padding-top: 2px; font-size: 11px; line-height: 18px; }
html[data-phone-layout] .long-press-legend-list { grid-template-columns: repeat(4, max-content); gap: 2px 8px; }
html[data-phone-layout] .long-press-legend-list li { gap: 5px; }
html[data-phone-layout] .long-press-legend-list img { width: 18px; height: 18px; }
html[data-phone-layout] .control-rail { gap: 6px; margin-top: 14px; overflow: auto; overscroll-behavior: contain; }
html[data-phone-layout] .phone-view-tabs { height: 36px; }
html[data-phone-layout] .phone-view-tabs button { min-height: 30px; height: 30px; }
html[data-phone-layout] .phone-mode-list button { min-height: 34px; height: 34px; gap: 4px; padding: 0 4px; }
html[data-phone-layout] .phone-mode-icon { width: 16px; height: 16px; flex: none; }
html[data-phone-layout] .phone-stepper { height: 36px; grid-template-columns: 36px minmax(0, 1fr) 36px; }
html[data-phone-layout] .phone-stepper button { width: 36px; height: 36px; }
html[data-phone-layout] .phone-stepper output { font-size: 20px; }
html[data-phone-layout] .training-footer { grid-template-columns: minmax(0, 1fr) var(--rail-width); gap: var(--layout-gap); }
html[data-phone-layout] .training-footer p { font-size: 9px; line-height: 1.4; }

/* Clockwise rotation: physical top/bottom insets become logical left/right. */
@media (orientation: portrait) {
  html[data-phone-layout] .app-shell {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100dvh;
    height: 100dvw;
    padding: max(4px, var(--phone-safe-right)) max(8px, var(--phone-safe-bottom)) max(8px, var(--phone-safe-left)) max(8px, var(--phone-safe-top));
    transform: rotate(90deg);
    transform-origin: top left;
  }
}

@container phone-workbench (max-width: 400px) {
  html[data-phone-layout] .long-press-legend { gap: 4px; font-size: 10px; }
  html[data-phone-layout] .long-press-legend-list { gap: 2px 5px; }
  html[data-phone-layout] .long-press-legend-list li { gap: 3px; }
  html[data-phone-layout] .long-press-legend-list img { width: 16px; height: 16px; }
}

@container phone-workbench (max-width: 340px) {
  html[data-phone-layout] .long-press-legend-list { grid-template-columns: repeat(2, max-content); }
}

@container application (max-width: 600px) {
  html[data-phone-layout] .training-footer p { font-size: 8px; }
}