/* Responsive hardening shared by the public site and both dashboards. */
html,
body { max-width: 100%; overflow-x: clip; }

#prototype-view,
#prototype-view > *,
section,
article,
aside,
nav,
.container,
.card,
.card-head > *,
.control,
.control > input,
.control > select,
.control > textarea { min-width: 0; }

.btn { max-width: 100%; white-space: normal; line-height: 1.35; }
.card-head h3,
.notice p,
.helper,
.metric span,
.metric strong,
.row-copy strong,
.row-copy span,
.row-value strong { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.metric { display: flex; flex-direction: column; justify-content: space-between; }
.metric span { line-height: 1.35; }
.metric strong { line-height: 1.25; }
.work-layout .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.data-row { align-items: flex-start; }
.row-copy { align-self: center; }
.row-value { align-self: center; max-width: 42%; overflow-wrap: anywhere; }
.card-head { min-width: 0; }
.task-card { text-align: left; }
.chips { padding-bottom: 3px; }

@media (max-width: 1100px) {
  .content-grid > *,
  .staff-grid > *,
  .work-layout > *,
  .detail-layout > *,
  .process-grid > *,
  .onboarding-layout > * { min-width: 0; }
}

@media (min-width: 521px) and (max-width: 1100px) {
  .task-grid > :last-child:nth-child(odd),
  .role-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tablet portrait: use the compact navigation instead of squeezing a sidebar. */
@media (max-width: 960px) {
  .public-links.desktop-only,
  .public-actions > .desktop-only,
  .dash-topbar .desktop-only,
  .staff-topbar .desktop-only { display: none !important; }
  .public-actions .mobile-only,
  .dash-topbar .mobile-only,
  .staff-topbar .mobile-only { display: inline-grid !important; }

  .investor-shell,
  .staff-shell,
  .investor-shell.sidebar-collapsed,
  .staff-shell.sidebar-collapsed { display: block; }
  .investor-sidebar,
  .staff-sidebar { display: none; }
  .dash-topbar,
  .staff-topbar { top: 0; min-height: 72px; padding-inline: clamp(18px, 4vw, 34px); }
  .dash-content,
  .staff-content { width: 100%; padding-inline: clamp(18px, 4vw, 34px); }
  .dash-content { padding-bottom: 104px; }
  .investor-mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; height: 72px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 7px 10px; background: rgb(255 255 255 / 96%); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
  .investor-mobile-nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-inline: 3px; color: var(--ink-400); background: transparent; border: 0; font-size: .58rem; }
  .investor-mobile-nav i,
  .investor-mobile-nav svg { width: 18px; height: 18px; }
  .screen-head,
  .staff-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 700px) {
  .section-head h2,
  .page-hero h1 { font-size: clamp(2.45rem, 13vw, 3.3rem); }
  .onboarding-copy h1,
  .process-head h1,
  .detail-info h1 { overflow-wrap: anywhere; }
  .finance-flow { grid-template-columns: 1fr !important; }
  .finance-step::after { display: none !important; }
  .screen-head h2,
  .staff-head h2 { font-size: clamp(1.45rem, 7vw, 2rem); overflow-wrap: anywhere; }
  .chat-layout,
  .chat-grid { min-height: 480px; }
  .bubble { max-width: 88%; }
}

@media (max-width: 520px) {
  .card { border-radius: 14px; }
  .card-head { flex-wrap: wrap; gap: 10px; }
  .card-head > .badge { flex: 0 0 auto; }
  .data-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; min-height: 0; }
  .row-icon { grid-column: 1; grid-row: 1 / span 2; }
  .row-copy { grid-column: 2; align-self: center; }
  .row-value { grid-column: 2; max-width: none; justify-self: start; text-align: left; }
  .queue-item { grid-template-columns: 42px minmax(0, 1fr); }
  .queue-item > .badge { grid-column: 2; justify-self: start; }
  .section-title,
  .catalog-toolbar,
  .label-row,
  .form-action-row { align-items: flex-start; flex-wrap: wrap; }
  .unit-row { grid-template-columns: 62px minmax(0, 1fr) !important; }
  .unit-row > .badge { grid-column: 2; justify-self: start; }
  .approval-actions { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .toast { right: 14px; bottom: 86px; max-width: calc(100% - 28px); }
  .empty { min-height: 280px; padding: 28px 18px; }
}

@media (max-width: 420px) {
  .top-avatar { display: none; }
  .dash-topbar,
  .staff-topbar { gap: 8px; padding-inline: 14px; }
  .dash-topbar > div:first-child,
  .staff-topbar > div:first-child { min-width: 0; gap: 9px; }
  .dash-topbar h1,
  .staff-topbar h1 { font-size: 1.02rem; line-height: 1.2; overflow-wrap: anywhere; }
  .dash-topbar p,
  .staff-topbar p { font-size: .54rem; }
  .dash-content,
  .staff-content { padding-inline: 14px; }
  .hero-buttons .btn,
  .auth-actions .btn { width: 100%; }
  .p1-search { gap: 8px; padding-left: 14px; }
  .p1-search .btn { padding-inline: 13px; }
  .option-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
  .onboarding-points > div,
  .value-point { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
}