/* system/apps/test-nav/styles.css
 *
 * Split out of index.html's shared <style> block (Sept 2026) -- see
 * start-here.md's "Each app owns its own styles.css" note for why.
 *
 * Section C, Layer 0 of phone-app-studio-features-plan.md. Layer 0.1
 * only right now: one single-line field, alone, vertically centered
 * in the available content area. Do not add layout for 0.2+ here
 * until 0.1 is confirmed clean on-device.
 */

.test-nav-layer0 {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 14px;
}

.test-nav-instructions {
  max-width: 320px;
  font-size: var(--fs-xs);
  color: var(--slate);
}

.test-nav-field {
  width: 100%;
  max-width: 320px;
  padding: 12px 14px;
  /* Testing a specific hypothesis (Sept 2026): the gray flash Ron
     confirmed on-device is very likely iOS Safari's default tap-
     highlight overlay, not the compositor-layer theory an earlier
     (apparently unsuccessful) fix attempt targeted -- CONFIRMED, see
     app.js's header. Kept as this app's own rule (not folded into
     the shared .text-input-base) since it's a fix specific to this
     one field's own reported bug, not a general convention every
     text-input-base consumer needs. */
  -webkit-tap-highlight-color: transparent;
}

.test-nav-debug-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  padding: 4px 8px;
  pointer-events: none;
  word-break: break-word;
}