/*
 * Shared browser-only mobile and accessibility foundations.
 * Deliberately scoped to the PrepCompass app shell. The emergency-plan
 * document and fixed-page print layouts are excluded at the element level.
 */
@media screen {
  body.prepcompass-app :is(.text-brand-slate, .text-slate, .text-gray-400, .text-gray-500, .text-gray-600):not(.bg-coal *):not(.bg-brand-coal *):not(#plan-container *):not(.page-wrapper *) {
    color: #4b5563 !important;
  }
  body.prepcompass-app a[style*="color: var(--color-sunset)"]:not([style*="background"]):not(.bg-coal *):not(.bg-brand-coal *):not(#plan-container *):not(.page-wrapper *) {
    color: #8a431b !important;
  }
  body.prepcompass-app .bg-brand-coal :focus-visible {
    outline-color: var(--color-sunset, #f28a40);
  }
  body.prepcompass-app .quest-step-track .bg-brand-sunset {
    color: var(--color-coal, #0d181c);
  }
  body.prepcompass-app :is(a, button, input, select, textarea, summary, [role="button"]):not(#plan-container *):not(.page-wrapper *):focus-visible {
    outline: 3px solid var(--color-gold, #f7ac38);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--color-coal, #0d181c);
  }

  body.prepcompass-app a:not(#plan-container *):not(.page-wrapper *) {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  body.prepcompass-app a:not(#plan-container *):not(.page-wrapper *):hover {
    text-decoration-color: var(--color-sunset, #f28a40);
  }

  /* Brand orange/gold are emphasis backgrounds, not low-contrast white text. */
  body.prepcompass-app :is(button, a, [role="button"]):is(.bg-sunset, .bg-gold):not(#plan-container *):not(.page-wrapper *) {
    color: var(--color-coal, #0d181c) !important;
  }

  body.prepcompass-app img:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app video:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app iframe:not(#plan-container *):not(.page-wrapper *) {
    max-width: 100%;
  }

  body.prepcompass-app .dashboard-container:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app .dashboard-content:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app main:not(#plan-container *):not(.page-wrapper *) {
    min-width: 0;
  }

  body.prepcompass-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app select:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app textarea:not(#plan-container *):not(.page-wrapper *) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-coal, #0d181c);
    border: 1px solid #59666a;
  }

  body.prepcompass-app textarea:not(#plan-container *):not(.page-wrapper *) {
    min-height: 7rem;
    resize: vertical;
  }

  body.prepcompass-app label:not(#plan-container *):not(.page-wrapper *) {
    display: block;
    color: var(--color-coal, #0d181c);
    font-size: 1rem;
    line-height: 1.45;
  }

  body.prepcompass-app input[type="checkbox"]:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app input[type="radio"]:not(#plan-container *):not(.page-wrapper *) {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--color-olive, #589754);
  }

  body.prepcompass-app label:has(input[type="checkbox"]):not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app label:has(input[type="radio"]):not(#plan-container *):not(.page-wrapper *) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    cursor: pointer;
  }

  body.prepcompass-app input:is([type="checkbox"], [type="radio"]) + label:not(#plan-container *):not(.page-wrapper *) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
    cursor: pointer;
  }

  body.prepcompass-app .form-group:not(#plan-container *):not(.page-wrapper *) > label,
  body.prepcompass-app .field:not(#plan-container *):not(.page-wrapper *) > label {
    margin-bottom: 0.4rem;
  }

  /* Keep dense Tailwind-style content readable without changing page IA. */
  body.prepcompass-app .grid:not(#plan-container *):not(.page-wrapper *) {
    min-width: 0;
  }

  body.prepcompass-app .grid > *:not(#plan-container *):not(.page-wrapper *),
  body.prepcompass-app .flex > *:not(#plan-container *):not(.page-wrapper *) {
    min-width: 0;
  }

  body.prepcompass-app table:not(#plan-container *):not(.page-wrapper *) {
    max-width: 100%;
  }

  body.prepcompass-app .mobile-menu-overlay[aria-hidden="true"]:not(#plan-container *):not(.page-wrapper *) {
    visibility: hidden;
  }

  @media (max-width: 767px) {
    body.prepcompass-app .dashboard-page-heading:has(#plan-actions) {
      flex-direction: column;
      align-items: stretch !important;
      gap: 0.75rem;
      height: auto !important;
    }
    body.prepcompass-app .dashboard-page-heading:has(#plan-actions) > div {
      width: 100%;
      flex-shrink: 1 !important;
    }
    body.prepcompass-app #plan-actions {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
    }
    body.prepcompass-app #plan-actions button {
      width: 100%;
      white-space: normal;
      justify-content: center;
    }
    body.prepcompass-app .quest-step-track {
      flex-wrap: wrap !important;
      overflow: visible !important;
      gap: 0.5rem;
    }
    body.prepcompass-app .quest-step-track > div {
      flex-wrap: wrap !important;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      min-width: 0;
    }
    body.prepcompass-app:not(#plan-container):not(.page-wrapper) {
      width: 100%;
    }

    body.prepcompass-app :where(:not(#plan-container):not(#plan-container *):not(.page-wrapper):not(.page-wrapper *)) {
      min-width: 0;
    }

    body.prepcompass-app :is(p, li, label, input, select, textarea, button, a):not(#plan-container *):not(.page-wrapper *) {
      font-size: max(1rem, 1em);
    }

    body.prepcompass-app :is(.text-xs, .text-sm):not(#plan-container *):not(.page-wrapper *) {
      font-size: max(1rem, 1em);
      line-height: 1.4;
    }

    body.prepcompass-app .quest-step-track span:not(#plan-container *):not(.page-wrapper *) {
      font-size: 1rem;
      white-space: normal;
      line-height: 1.25rem;
    }

    body.prepcompass-app :is(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6):not(#plan-container *):not(.page-wrapper *) {
      grid-template-columns: minmax(0, 1fr);
    }

    body.prepcompass-app :is(button, [type="button"], [type="submit"], [type="reset"], a, summary, [role="button"]):not(#plan-container *):not(.page-wrapper *) {
      min-height: 44px;
      min-width: 44px;
    }

    body.prepcompass-app a:not(#plan-container *):not(.page-wrapper *) {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding-block: 0.625rem;
    }

    body.prepcompass-app .touch-target:not(#plan-container *):not(.page-wrapper *) {
      min-height: 44px;
      min-width: 44px;
    }

    body.prepcompass-app label[for]:not(#plan-container *):not(.page-wrapper *) {
      display: flex;
      align-items: center;
      min-height: 44px;
      min-width: 44px;
    }

    body.prepcompass-app input[type="checkbox"]:not(#plan-container *):not(.page-wrapper *),
    body.prepcompass-app input[type="radio"]:not(#plan-container *):not(.page-wrapper *) {
      min-width: 24px;
      min-height: 24px;
    }

    body.prepcompass-app .dashboard-container:not(#plan-container *):not(.page-wrapper *),
    body.prepcompass-app .dashboard-container > *:not(#plan-container *):not(.page-wrapper *) {
      max-width: 100%;
    }

    body.prepcompass-app .desktop-sidebar:not(#plan-container *):not(.page-wrapper *) {
      display: none !important;
    }

    body.prepcompass-app .mobile-header:not(#plan-container *):not(.page-wrapper *) {
      display: flex;
    }

    body.prepcompass-app .quest-header-cluster:not(#plan-container *):not(.page-wrapper *) {
      flex-wrap: wrap;
    }

    body.prepcompass-app .quest-navigation-cluster:not(#plan-container *):not(.page-wrapper *) {
      display: none;
      flex-basis: 100%;
      min-width: 0;
    }

    body.prepcompass-app .quest-navigation-cluster.is-open:not(#plan-container *):not(.page-wrapper *) {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }

    body.prepcompass-app .quest-step-track:not(#plan-container *):not(.page-wrapper *) {
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
    }

    body.prepcompass-app .quest-step-track > div:not(#plan-container *):not(.page-wrapper *) {
      flex: 0 0 auto;
    }

    body.prepcompass-app .quest-menu-toggle:not(#plan-container *):not(.page-wrapper *) {
      display: inline-flex;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 0.5rem;
      color: var(--color-white, #fff);
    }

    body.prepcompass-app .quest-menu-toggle[aria-expanded="true"]:not(#plan-container *):not(.page-wrapper *) {
      background-color: rgba(255, 255, 255, 0.12);
    }

    body.prepcompass-app .quest-mobile-topbar:not(#plan-container *):not(.page-wrapper *) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
    }
  }

  @media (min-width: 768px) {
    body.prepcompass-app .quest-mobile-topbar:not(#plan-container *):not(.page-wrapper *) {
      display: contents;
    }

    body.prepcompass-app .quest-menu-toggle:not(#plan-container *):not(.page-wrapper *) {
      display: none;
    }

    body.prepcompass-app .quest-navigation-cluster:not(#plan-container *):not(.page-wrapper *) {
      display: contents;
    }
  }
}