/* =============================================================================
 * HRD-Mobile — Application Shell Styling (M00 PART 05B)
 *
 * Web renderer mapping for the Work Path International welcome/application
 * shell. Consumes the semantic token mapping in styles/tokens.css; it does
 * not define a second design system and encodes no business/domain state.
 *
 *   styles/tokens.css  (CSS custom properties)
 *           ↓
 *   styles/shell.css   (shell presentation)
 *           ↓
 *   index.html         (Web UI)
 * ===========================================================================*/

/* ---- Foundation ---------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-header,
.app-main,
.app-nav,
.app-nav-list,
.app-nav-item,
.welcome,
.welcome-logo {
  box-sizing: border-box;
}

/* ---- Application header -------------------------------------------------- */

.app-header {
  width: 100%;
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--layout-page-padding-horizontal);
  padding-top: calc(var(--spacing-md) + env(safe-area-inset-top, 0px));
  background-color: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-default);
}

.app-brand {
  font-size: var(--typography-heading-font-size);
  line-height: var(--typography-heading-line-height);
  font-weight: var(--typography-heading-font-weight);
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

/* ---- Main content region ------------------------------------------------- */

.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-page-padding-horizontal);
  padding-bottom: calc(
    var(--layout-bottom-navigation-height) + var(--spacing-xl) +
      env(safe-area-inset-bottom, 0px)
  );
  display: flex;
  flex-direction: column;
}

/* Neutral future-rendering area. No feature-specific visual semantics. */
.app-content-region {
  min-height: 0;
}

/* ---- Welcome / launch presentation -------------------------------------- */

.welcome {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.welcome-logo {
  display: block;
  width: min(100%, 240px);
  height: auto;
  object-fit: contain;
}

#welcome-heading {
  margin: 0;
  font-size: var(--typography-heading-font-size);
  line-height: var(--typography-heading-line-height);
  font-weight: var(--typography-heading-font-weight);
  color: var(--color-text-primary);
  max-width: 24ch;
  overflow-wrap: break-word;
}

.welcome-continue {
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  background-color: var(--color-action-primary);
  color: var(--color-action-primary-contrast);
  font-family: inherit;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-label-font-weight);
  min-height: var(--layout-touch-target-min);
  padding: var(--spacing-sm) var(--spacing-xxl);
  border-radius: var(--radius-control);
  box-shadow: var(--elevation-low);
  transition: background-color var(--motion-duration-fast)
    var(--motion-easing-standard);
}

.welcome-continue:active {
  background-color: var(--color-text-primary);
}

.welcome-continue:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}

/* ---- Renderer visibility states ------------------------------------------ */

/* Welcome view (initial): the application shell chrome is not presented as
 * the active experience yet. */
body[data-app-view="welcome"] .app-header,
body[data-app-view="welcome"] .app-content-region,
body[data-app-view="welcome"] .app-nav {
  display: none;
}

/* Shell view: the welcome presentation is hidden and the shell is active. */
body[data-app-view="shell"] .welcome {
  display: none;
}

/* ---- Primary bottom navigation ------------------------------------------- */

.app-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--layout-content-max-width);
  z-index: 10;
  background-color: var(--color-surface-default);
  border-top: 1px solid var(--color-border-default);
  box-shadow: var(--elevation-low);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--layout-bottom-navigation-height);
}

.app-nav-list li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.app-nav-item {
  flex: 1 1 0;
  border: 0;
  border-top: 2px solid transparent;
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  font-weight: var(--typography-label-font-weight);
  min-height: var(--layout-touch-target-min);
  padding: var(--spacing-xxs) var(--spacing-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  overflow-wrap: break-word;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.app-nav-icon {
  font-size: 16px;
  line-height: 1;
}

.app-nav-label {
  font-size: 11px;
  line-height: var(--typography-caption-line-height);
}

.app-nav-item:active {
  background-color: var(--color-surface-subtle);
}

.app-nav-item:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: -2px;
}

/* Active tab: driven by aria-current="page", set presentation-only by
 * src/app/nav-section-runtime.js from the screen currently rendered into
 * the shared content region. No routing/business meaning is added.
 * Lightweight treatment: compact colored icon/label + small accent dot. */
.app-nav-item[aria-current="page"] {
  color: var(--color-action-primary);
}

.app-nav-item[aria-current="page"] .app-nav-icon {
  transform: scale(1.05);
}

.app-nav-item[aria-current="page"] .app-nav-icon::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 3px auto 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-action-primary);
}

/* ---- Responsive & accessibility ------------------------------------------ */

@media (min-width: 641px) {
  .app-header,
  .app-main,
  .app-nav {
    box-shadow: none;
  }

  .app-nav {
    border-top: 1px solid var(--color-border-default);
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav-item,
  .welcome-continue {
    transition: none;
  }
}