/* Mobile touch target baseline (44px).
   Keep it as a lightweight opt-in class to avoid breaking desktop layouts. */

.touch-target {
  min-height: 44px;
  min-width: 44px;
}

:root {
  --mobile-viewport-height: 100vh;
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-page-x: clamp(10px, 3vw, 20px);
  --mobile-page-y: clamp(10px, 2.8vw, 20px);
  --mobile-card-gap: clamp(8px, 2.5vw, 14px);
  --mobile-card-padding: clamp(12px, 3.4vw, 16px);
  --mobile-bottom-nav-height: 68px;
  --mobile-sticky-action-height: 78px;
  --mobile-icon-action-min-height: 72px;
  --mobile-slot-gap: clamp(12px, 3.7vw, 16px);
  --mobile-action-icon-slot: 36px;
  --mobile-me-slot-gap: var(--mobile-slot-gap);
  --mobile-me-action-icon-slot: var(--mobile-action-icon-slot);
}

.page-scaffold.mobile-fixed-action-page {
  animation: none;
  transform: none;
}

@supports (height: 100dvh) {
  :root {
    --mobile-viewport-height: 100dvh;
  }
}

.mobile-card {
  border: 1px solid rgb(228 228 231);
  border-radius: 12px;
  background: rgb(255 255 255);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  padding: var(--mobile-card-padding);
}

.mobile-focus-card {
  border-color: rgb(191 219 254);
  background: linear-gradient(180deg, rgb(239 246 255), rgb(255 255 255));
}

.mobile-command-surface {
  display: grid;
  gap: var(--mobile-card-gap);
  min-width: 0;
  border: 1px solid rgb(228 228 231);
  border-radius: 12px;
  background: rgb(250 250 250);
  padding: 10px;
}

.hyb-mobile-shell .section-panel::before {
  display: none;
}

.mobile-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-icon-action {
  min-width: 0;
  min-height: var(--mobile-icon-action-min-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 2vw, 9px);
  border: 1px solid rgb(228 228 231);
  border-radius: 14px;
  background: rgb(255 255 255);
  color: rgb(24 24 27);
  padding: 8px 4px;
  text-align: center;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-icon-action--primary {
  border-color: rgb(191 219 254);
  background: rgb(239 246 255);
  color: rgb(0 57 138);
}

.mobile-icon-action--warning {
  border-color: rgb(253 230 138);
  background: rgb(255 251 235);
  color: rgb(146 64 14);
}

.mobile-icon-action__icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.86);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.07);
}

.mobile-icon-action__icon svg {
  display: block;
}

.mobile-icon-action__label {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
}

.mobile-adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-entry-grid,
.mobile-me-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-slot-row,
.mobile-me-profile-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--mobile-slot-gap);
  align-items: center;
  min-width: 0;
}

.mobile-slot-avatar,
.mobile-me-avatar-slot {
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-slot-copy,
.mobile-me-profile-copy {
  min-width: 0;
}

.mobile-slot-copy > *,
.mobile-me-profile-copy > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-action-link,
.mobile-me-action-link {
  display: grid;
  grid-template-columns: var(--mobile-action-icon-slot) minmax(0, 1fr);
  column-gap: var(--mobile-slot-gap);
  align-items: center;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgb(228 228 231);
  border-radius: 10px;
  background: rgb(255 255 255);
  padding: 8px 12px;
  text-align: left;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.mobile-action-link:hover,
.mobile-me-action-link:hover {
  background: rgb(250 250 250);
}

.mobile-action-icon,
.mobile-me-action-icon {
  width: var(--mobile-action-icon-slot);
  height: var(--mobile-action-icon-slot);
  border-radius: 10px;
  background: rgb(244 244 245);
  color: rgb(63 63 70);
  padding: 7px;
}

.mobile-action-icon svg,
.mobile-me-action-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-action-copy,
.mobile-me-action-copy {
  display: block;
  min-width: 0;
}

.mobile-action-copy > *,
.mobile-me-action-copy > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-list-card {
  min-width: 0;
  border: 1px solid rgb(228 228 231);
  border-radius: 12px;
  background: rgb(255 255 255);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
  padding: var(--mobile-card-padding);
}

.mobile-list-card--focus {
  border-color: rgb(191 219 254);
  background: rgb(239 246 255);
}

.mobile-list-card--unread {
  border-color: rgb(191 219 254);
  background: rgb(239 246 255);
}

.mobile-page-stack {
  display: grid;
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.mobile-section-header--top {
  align-items: flex-start;
}

.mobile-section-title {
  min-width: 0;
  color: rgb(24 24 27);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35rem;
}

.mobile-section-meta {
  flex: none;
  color: rgb(113 113 122);
  font-size: 0.75rem;
  line-height: 1rem;
}

.mobile-list-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.5rem;
  align-items: start;
  min-width: 0;
}

.mobile-list-card__header--approval {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.mobile-list-card__title {
  min-width: 0;
  overflow: hidden;
  color: rgb(24 24 27);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-list-card__subtitle {
  min-width: 0;
  overflow: hidden;
  color: rgb(113 113 122);
  font-size: 0.75rem;
  line-height: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-status-slot {
  display: inline-flex;
  min-width: max-content;
  max-width: min(46vw, 8rem);
  justify-self: end;
  overflow: visible;
  text-align: right;
  white-space: nowrap;
}

.mobile-status-slot > * {
  min-width: max-content;
  white-space: nowrap;
}

.mobile-status-slot--approval {
  min-width: 4.5rem;
  max-width: none;
  justify-content: flex-end;
}

.mobile-status-slot--approval > *,
.mobile-status-badge {
  min-width: 4.25rem;
  justify-content: center;
  overflow: visible;
}

.mobile-subcard {
  min-width: 0;
  border: 1px solid rgb(228 228 231);
  border-radius: 10px;
  background: rgb(255 255 255);
  padding: 10px 12px;
}

.mobile-empty-state {
  min-width: 0;
  border: 1px dashed rgb(228 228 231);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(113 113 122);
}

.mobile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-field-list {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.mobile-field-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.mobile-field-label {
  color: rgb(113 113 122);
}

.mobile-field-value {
  min-width: 0;
  color: rgb(39 39 42);
  overflow-wrap: anywhere;
}

.mobile-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.75rem), 1fr));
  gap: var(--mobile-card-gap);
  min-width: 0;
}

.mobile-two-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.mobile-bottom-nav-surface {
  min-height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
  padding: 0.375rem var(--mobile-page-x) calc(0.35rem + var(--mobile-safe-area-bottom));
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mobile-sticky-action-surface {
  padding: 0.75rem var(--mobile-page-x) max(0.75rem, var(--mobile-safe-area-bottom));
}

.mobile-sticky-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.mobile-sticky-action-grid > * {
  min-height: 46px;
}

.mobile-approval-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-approval-action-grid > * {
  min-width: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (max-width: 359px) {
  :root {
    --mobile-page-x: 8px;
    --mobile-card-gap: 6px;
    --mobile-card-padding: 10px;
    --mobile-icon-action-min-height: 68px;
    --mobile-slot-gap: 12px;
    --mobile-action-icon-slot: 34px;
  }

  .mobile-icon-action__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 20px;
  }

  .mobile-icon-action__label {
    font-size: 12px;
    line-height: 17px;
  }
}