/* AD-05-specific exception: Guided Pass self-check is an intentional 2x2
 * action panel. All chapter/stage/block selectors and pass switches now
 * inherit the global mobile metro rule from assets/css/learning-shell.css.
 * This file MUST NOT redefine the global selector/navigation layout. */
.ad05-control-label--short { display: none; }

/*
 * Guided Pass self-check: fixed two-by-two action grid, smartphone only.
 * Keep the four canonical actions in their existing DOM/keyboard order.
 * The runtime's reserved last row is 108px on mobile: 44 + 8 + 44 = 96px.
 * Other phases retain the original action arrangement.
 */
@media (max-width: 767px) {
  #runtimeStage[data-phase="selfcheck"] #runtimeControls {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 44px);
    align-items: stretch;
    align-content: center;
    justify-items: stretch;
    gap: 8px;
    width: min(430px, 100%);
    min-width: 0;
    margin-inline: auto;
  }

  #runtimeStage[data-phase="selfcheck"] #runtimeControls :is(
    #compareBtn, #modelAgainBtn, #tryAgainBtn, #nextBtn
  ) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 7px 4px;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  #runtimeStage[data-phase="selfcheck"] #compareBtn    { grid-area: 1 / 1; }
  #runtimeStage[data-phase="selfcheck"] #modelAgainBtn { grid-area: 1 / 2; }
  #runtimeStage[data-phase="selfcheck"] #tryAgainBtn   { grid-area: 2 / 1; }
  #runtimeStage[data-phase="selfcheck"] #nextBtn       { grid-area: 2 / 2; }

  /*
   * Unit 03 has an additional active STOP control during self-check.
   * Preserve its function without turning the 2x2 action grid into 3 rows.
   * Its containing block is the existing position:relative runtime-workspace.
   */
  body[data-unit-page="ad05-03"] #runtimeStage[data-phase="selfcheck"] #stopBtn:not([hidden]) {
    position: absolute;
    top: 12px;
    right: 10px;
    width: auto;
    min-width: 54px;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1;
    z-index: 1;
  }
}