/* MPLS Ramah v1.7.5 — Accessibility & PWA Cache Foundation
   Loaded last as a conservative cross-app override. */
:root {
  --app-blue-text: #0057b8;
  --app-blue-fill: #0067d9;
  --app-blue-on-fill: #ffffff;
  --app-text-tertiary-readable: #6e6e73;
  --app-font-nav: 11px;
  --app-font-metadata: 12px;
  --app-font-secondary: 13px;
  --app-touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-blue-text: #66b2ff;
    --app-blue-fill: #0b70db;
    --app-blue-on-fill: #ffffff;
    --app-text-tertiary-readable: #b8b8be;
  }
}

:root[data-theme="dark"] {
  --app-blue-text: #66b2ff;
  --app-blue-fill: #0b70db;
  --app-blue-on-fill: #ffffff;
  --app-text-tertiary-readable: #b8b8be;
}

/* Accessible accent roles: text and filled controls no longer share one color. */
:where(
  .eyebrow,
  .auth-foot a,
  .choice-card span,
  .password-field button,
  .badge-info,
  .mobile-tab.is-active,
  .desktop-nav-link.is-active,
  .sheet-menu-icon,
  .agenda-open,
  .material-progress-head a,
  .participant-stage-head-v165 > a,
  .participant-day-card-head-v165 b,
  .participant-day-card-v165 > em,
  .mpls-card-disclosure-v165 > summary > b,
  .mpls-history-panel-v165 > header a,
  .discussion-send-v170,
  .discussion-action-v170,
  .discussion-sort-v170 select,
  .schedule-day-tab-v169.is-active,
  .schedule-day-tab-v169.is-current,
  .activity-instructions-v169 > summary .ui-icon,
  .activity-attendance-v169 > span:first-child
) {
  color: var(--app-blue-text) !important;
}

:where(
  .button-primary,
  .monitoring-actions a.is-primary,
  .schedule-current-icon-v169,
  .activity-row-v169.is-current .activity-marker-v169,
  .activity-live-v169,
  .activity-action-primary-v169,
  .agenda-row.is-current .agenda-marker
) {
  background: var(--app-blue-fill) !important;
  border-color: var(--app-blue-fill) !important;
  color: var(--app-blue-on-fill) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--app-blue-text) !important;
}

/* Readable metadata. Only selectors known to carry meaningful information. */
:where(
  .compact-page-header small,
  .focus-copy small,
  .home-mini-card small,
  .home-group-copy small,
  .compact-progress-head span small,
  .progress-dot small,
  .staff-summary-strip small,
  .staff-section-heading small,
  .staff-action-copy small,
  .mobile-day-date small,
  .mobile-day-copy small,
  .day-summary-card small,
  .day-progress small,
  .agenda-section > header small,
  .agenda-time small,
  .agenda-copy small,
  .agenda-completed > summary span,
  .material-copy-v12 small,
  .material-copy-v12 em,
  .material-help-link small,
  .portfolio-progress-v12 span small,
  .portfolio-item-head-v12 small,
  .monitoring-day-head small,
  .monitoring-metrics small,
  .pra-progress-bar small,
  .pra-step-copy small,
  .participant-day-card-v165 small,
  .participant-stage-pill-v165 small,
  .attendance-timeline-copy-v165 small,
  .discussion-role-v170,
  .discussion-time-v170,
  .discussion-reaction-count-v170,
  .discussion-reply-toggle-v170,
  .discussion-status-v170,
  .discussion-mention-item small,
  .activity-time-v169 small,
  .activity-copy-v169 small,
  .activity-meta-v169,
  .activity-intro-status-v169 span,
  .sheet-menu-item small,
  .preference-row small,
  .profile-button-copy small,
  .badge
) {
  font-size: var(--app-font-metadata) !important;
  line-height: 1.35 !important;
}

:where(
  .stat-card small,
  .muted,
  .section-heading p,
  .discussion-empty-v170,
  .discussion-typing-v170,
  .activity-summary-v169,
  .participant-day-card-v165 p
) {
  color: var(--app-text-secondary) !important;
}

:where(
  .progress-dot small,
  .compact-page-header small,
  .staff-section-heading small,
  .agenda-section > header small,
  .monitoring-day-head small,
  .portfolio-progress-v12 span small,
  .discussion-time-v170
) {
  color: var(--app-text-tertiary-readable) !important;
}

/* Staff pages were over-compressed. Keep descriptions readable on phones. */
body.role-pendamping :where(small, .badge) {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
body.role-pendamping :where(.staff-action-copy strong, .companion-card-title, .group-card strong) {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* 44px touch targets without visually enlarging the glyph. */
:where(
  .icon-button,
  .topbar-actions .notification-link,
  .topbar-actions .topbar-theme-toggle,
  .mobile-tab,
  .button-small,
  .agenda-open,
  .discussion-menu-trigger-v170,
  .discussion-like-v170,
  .discussion-action-v170,
  .discussion-reply-toggle-v170,
  .discussion-send-v170,
  .pwa-status-button,
  [data-dismiss-toast],
  [data-close-more]
) {
  min-width: var(--app-touch-target) !important;
  min-height: var(--app-touch-target) !important;
}

/* Mobile bottom navigation: five equal tabs, labels remain readable and may wrap. */
@media (max-width: 820px) {
  .mobile-tabbar {
    grid-template-columns: repeat(var(--mobile-tab-count, 5), minmax(0, 1fr)) !important;
    min-height: 70px;
    height: auto !important;
    padding: 5px !important;
  }
  .mobile-tab {
    min-height: 58px !important;
    padding: 5px 2px !important;
    gap: 3px !important;
    overflow: visible !important;
    font-size: var(--app-font-nav) !important;
    line-height: 1.05 !important;
  }
  .mobile-tab > span {
    display: -webkit-box !important;
    width: 100%;
    min-height: 12px;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: normal !important;
    text-align: center;
    font-size: var(--app-font-nav) !important;
    line-height: 1.05 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .mobile-tab .ui-icon {
    width: 21px !important;
    height: 21px !important;
  }
  .app-page-shell {
    margin-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 360px) {
  .topbar-actions .topbar-theme-toggle,
  .topbar-actions .notification-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .mobile-tab,
  .mobile-tab > span {
    font-size: 10.5px !important;
  }
}

/* Better readability for common compact cards on phones. */
@media (max-width: 600px) {
  .stat-card small,
  .activity-card-copy small,
  table.responsive-cards td::before,
  .app-toast,
  .quick-action small,
  .choice-card p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .activity-card-copy strong,
  .agenda-copy strong,
  .material-copy-v12 strong,
  .portfolio-item-head-v12 strong {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .sheet-menu-item {
    min-height: 58px;
  }
}

/* High-contrast focus remains visible in both themes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--app-blue-text) !important;
  outline-offset: 2px !important;
}