/* Screen layout follows the available workspace, including the user's display scale.
   Document tables and print/export sizing are managed separately. */
@media screen {
  .work-panel,
  #projectDetailPane .project-detail-content,
  .customer-sheet,
  .manager-shell {
    container: workbench / inline-size;
    min-width: 0;
  }

  .workspace-pane,
  .project-detail-section,
  .project-detail-heading-copy,
  .project-page-head > div,
  .project-upload-card > div,
  .contract-template-head > div,
  .project-album-fields,
  .project-link-card,
  .profile-page-section,
  .library-list-panel,
  .library-card > div {
    min-width: 0;
    max-width: 100%;
  }

  :is(.project-form, .profile-page-form, .library-form, .library-search,
      .project-link-card, .team-invite-fields, .account-team-add) :is(label, input, select, textarea) {
    min-width: 0;
    max-width: 100%;
  }

  :is(.project-card, .template-card, .library-card, .profile-page-section,
      .project-upload-card, .project-link-card, .team-project-card) :is(h3, p, strong),
  .project-detail-heading-copy p,
  .project-document-notes,
  .account-notification-title,
  .team-member-remark {
    overflow-wrap: anywhere;
  }

  .project-page-head,
  .project-page-tools,
  .contract-template-head,
  .project-upload-card,
  .profile-app-update-heading,
  .profile-app-update-actions,
  .account-notification-toolbar {
    flex-wrap: wrap;
  }

  #projectsPane .project-page-tools {
    max-width: 100%;
  }

  #projectsPane .project-page-tools input {
    flex: 1 1 180px;
    width: min(410px, 100%);
    min-width: 0;
  }

  #newProjectPane .project-form,
  #projectDetailPane .project-information-form {
    width: min(1180px, calc(100% - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-form-section,
  .profile-page-section,
  #productsPane .library-list-panel {
    container: fields / inline-size;
  }

  .project-form-grid,
  #projectDetailPane .project-information-form .project-form-grid,
  .profile-page-form {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }

  .project-closing-grid,
  #projectDetailPane .project-information-form .project-closing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-form-wide,
  #projectDetailPane .project-information-form .project-form-section-wide,
  .profile-page-actions {
    grid-column: 1 / -1;
  }

  #projectsPane .project-list,
  #templatesPane .template-list,
  #historyPane .template-list {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  }

  #projectsPane .project-overview {
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, .75fr));
  }

  #projectsPane .project-overview-stat.budget strong {
    white-space: normal;
    line-height: 1.2;
  }

  #productsPane .library-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  }

  #productsPane .library-search {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 180px);
  }

  #productsPane .library-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #productsPane .library-card .card-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  #templatesPane .template-actions,
  #historyPane .template-actions {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  }

  #templatesPane .new-template-panel {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }

  .workspace-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-page-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-sms-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-sms-control button {
    white-space: nowrap;
  }

  .project-settlement-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-settlement-switchbar,
  .project-settlement-switch-actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  .project-settlement-tabs {
    min-width: 0;
    max-width: 100%;
  }

  .settlement-overview-card {
    container: settlement-card / inline-size;
  }

  .settlement-overview-card :is(input, select, textarea, label, strong),
  .reimbursement-grid > *,
  .supplier-invoice-import-item > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .settlement-card-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  }

  .settlement-overview-card > header,
  .settlement-subsection-head,
  .settlement-payment-progress > div,
  .project-reimbursement-group-header,
  .supplier-settlement-head,
  .supplier-settlement-head-actions,
  .supplier-settlement-key-totals,
  .supplier-settlement-detail-head,
  .supplier-invoice-import-head,
  .supplier-invoice-import-actions {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .supplier-settlement-workspace {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }

  .reimbursement-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  }

  .reimbursement-detail-field,
  .reimbursement-remarks-field {
    grid-column: 1 / -1;
  }

  .reimbursement-remove-button {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .project-link-row {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 120px);
  }

  .project-link-card-head,
  .project-album-preview-meta,
  .team-dialog-actions,
  .account-team-add,
  .project-collaboration-status,
  .activity-filters {
    flex-wrap: wrap;
  }

  .team-sync-label {
    white-space: normal;
  }

  .project-team-member > button,
  .account-request-actions {
    flex: 0 0 auto;
  }

  .project-team-member {
    flex-wrap: wrap;
  }

  .project-team-member > div {
    flex-basis: 160px;
  }

  .team-project-cards,
  #collaborationProjectsPane > .team-project-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  }

  /* Keep the main frame independent of legacy physical-viewport media rules. */
  html[data-display-layout] body.admin-screen > .topbar {
    display: none;
  }

  html[data-display-layout="desktop"] body.admin-screen {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  html[data-display-layout="desktop"] body.admin-screen .app-shell {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  html[data-display-layout] body.admin-screen .quote-layout,
  html[data-display-layout] body.admin-screen .quote-layout.top-navigation-layout {
    display: grid;
    min-width: 0;
    width: 100%;
  }

  html[data-display-layout="desktop"] body.admin-screen .quote-layout,
  html[data-display-layout="desktop"] body.admin-screen .quote-layout.top-navigation-layout {
    grid-template-columns: 214px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  html[data-display-layout="desktop"] body.admin-screen .navigation-panel {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: auto;
    background: linear-gradient(180deg, #06183f, #021333);
  }

  html[data-display-layout="desktop"] body.admin-screen .side-navigation {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: auto;
    padding: 20px 11px 16px !important;
  }

  html[data-display-layout="desktop"] .side-navigation-brand {
    display: flex;
    min-height: 80px;
    align-items: center;
    padding: 0 13px 18px;
  }

  html[data-display-layout="desktop"] .side-navigation-brand img {
    width: 132px;
    height: auto;
  }

  html[data-display-layout="desktop"] body.admin-screen .side-navigation .side-workspace-tabs {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    gap: 5px;
    overflow: visible;
  }

  html[data-display-layout="desktop"] body.admin-screen .side-workspace-tabs > button,
  html[data-display-layout="desktop"] body.admin-screen .workspace-nav-project-group > button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    color: rgba(246, 249, 255, .84);
    font-size: 14px;
  }

  html[data-display-layout] body.admin-screen .side-workspace-tabs > button.active,
  html[data-display-layout] body.admin-screen .workspace-nav-project-group > button.active {
    background: linear-gradient(135deg, #1680ff, #075cf0);
    color: #fff;
  }

  html[data-display-layout="desktop"] body.admin-screen .workspace-nav-project-group {
    display: block;
    width: 100%;
  }

  html[data-display-layout="desktop"] body.admin-screen .side-navigation > .topbar-actions {
    display: grid;
    height: auto;
    margin-top: auto;
    padding-top: 16px;
  }

  html[data-display-layout="desktop"] body.admin-screen .side-navigation > .display-scale-controls + .topbar-actions {
    margin-top: 0;
    padding-top: 0;
  }

  html[data-display-layout="desktop"] body.admin-screen .work-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  html[data-display-layout="desktop"] body.admin-screen .workspace-pane {
    min-height: 0;
    overflow: auto;
  }

  html[data-display-layout="desktop"] body.admin-screen #projectDetailPane {
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  html[data-display-layout] body.admin-screen .project-detail-head {
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    min-height: 0;
    padding: 12px 20px 10px;
  }

  html[data-display-layout] body.admin-screen #projectCollaborationStatus {
    grid-row: 2;
    min-width: 0;
    margin-bottom: 0;
  }

  html[data-display-layout] body.admin-screen #projectDetailPane > .project-detail-content {
    grid-row: 3;
    min-height: 0;
  }

  html[data-display-layout] body.admin-screen .project-detail-head > .project-detail-summary {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
    gap: 10px;
  }

  html[data-display-layout] body.admin-screen .project-detail-back {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }

  html[data-display-layout] body.admin-screen .project-detail-back span {
    display: none;
  }

  html[data-display-layout] body.admin-screen .project-detail-head > #saveProjectDetail {
    grid-column: 2;
    grid-row: 1;
    min-height: 38px;
    white-space: nowrap;
  }

  html[data-display-layout] body.admin-screen #projectDetailPane .project-detail-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    background: linear-gradient(100deg, #1978ef, #39b9ef);
    border-radius: 10px;
  }

  html[data-display-layout] body.admin-screen #projectDetailPane .project-detail-tabs > button {
    display: inline-flex;
    flex: 1 0 auto;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    min-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
  }

  html[data-display-layout] body.admin-screen .side-workspace-tabs > .mobile-more-menu,
  html[data-display-layout] body.admin-screen .project-detail-tabs > .mobile-project-more-menu {
    display: none;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .quote-layout,
  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .quote-layout.top-navigation-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    height: auto;
    overflow: visible;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen {
    display: block;
    overflow: auto;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .app-shell {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .navigation-panel {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: #06183f;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-navigation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    gap: 7px;
    padding: 8px !important;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) .side-navigation-brand {
    display: none;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-navigation .side-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(38px, auto);
    width: 100%;
    height: auto;
    gap: 5px;
    overflow: visible;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-workspace-tabs > button,
  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .workspace-nav-project-group > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: auto;
    min-height: 38px;
    padding: 6px;
    border-color: transparent;
    background: transparent;
    color: #edf4ff;
    font-size: 12px;
    white-space: normal;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) .workspace-nav-project-group {
    display: contents;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) .project-subnavigation {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) .project-navigation-caret {
    display: none;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-navigation > .topbar-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-navigation .profile-menu-wrap {
    width: min(100%, 210px);
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .side-navigation .profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
    z-index: 80;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .work-panel,
  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .workspace-pane,
  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen #projectDetailPane,
  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen #projectDetailPane .project-detail-content {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen #projectDetailPane {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.admin-screen .project-detail-head {
    position: relative;
    padding: 12px;
  }

  html[data-display-layout="phone"] body.admin-screen .side-navigation .side-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-display-layout="phone"] body.admin-screen .project-detail-head > #saveProjectDetail {
    padding-inline: 10px;
  }

  html[data-display-layout="phone"] body.admin-screen .project-detail-heading-copy h2 {
    font-size: 21px;
  }

  html[data-display-layout="phone"] body.admin-screen #projectDetailPane .project-detail-tabs > button {
    flex: 0 0 auto;
  }

  /* Dialogs must remain usable in short windows and at larger display scales. */
  .profile-center-dialog,
  .system-settings-dialog,
  .feedback-dialog,
  .table-fields-dialog,
  .project-file-dialog,
  .contract-template-editor-dialog {
    min-width: 0;
    padding: 12px;
    overflow: auto;
  }

  .profile-center-card,
  .system-settings-card,
  .feedback-card,
  .table-fields-card,
  .project-team-dialog,
  .design-list-dialog,
  .personnel-dialog,
  .design-list-preview,
  .design-image-zoom,
  .project-file-viewer,
  .contract-template-editor {
    min-width: 0;
    max-width: min(100%, calc(var(--display-viewport-width, 100vw) - 24px));
    max-height: calc(var(--display-viewport-height, 100dvh) - 24px);
    overflow: auto;
    overflow-wrap: anywhere;
  }

  .contract-template-editor-content {
    min-height: min(420px, max(100px, calc(var(--display-viewport-height, 100dvh) - 250px)));
  }

  .project-file-viewer {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .project-file-preview-stage {
    height: min(680px, max(100px, calc(var(--display-viewport-height, 100dvh) - 160px)));
  }

  .contract-template-editor > header,
  .contract-template-editor > footer,
  .contract-template-editor-toolbar,
  .project-file-viewer > header,
  .project-file-viewer > footer {
    flex-wrap: wrap;
  }

  .contract-template-editor-toolbar label,
  .contract-template-editor-toolbar input {
    min-width: 0;
    max-width: 100%;
  }

  .project-team-dialog {
    width: min(560px, calc(var(--display-viewport-width, 100vw) - 24px));
  }

  .project-activity-dialog {
    width: min(880px, calc(var(--display-viewport-width, 100vw) - 24px));
  }

  .design-list-dialog,
  .personnel-dialog {
    width: min(680px, calc(var(--display-viewport-width, 100vw) - 24px));
  }

  .design-list-preview {
    width: min(1280px, calc(var(--display-viewport-width, 100vw) - 24px));
  }

  .design-image-zoom {
    width: min(1200px, calc(var(--display-viewport-width, 100vw) - 24px));
  }

  .design-image-zoom img {
    max-height: max(80px, calc(var(--display-viewport-height, 100dvh) - 104px));
  }

  .public-meta {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }

  .customer-heading h2,
  .public-notes,
  .auth-hint {
    overflow-wrap: anywhere;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.auth-screen .auth-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.auth-screen .auth-hero {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.auth-screen .auth-hero h2 {
    white-space: normal;
  }

  html:is([data-display-layout="compact"], [data-display-layout="phone"]) body.auth-screen .auth-card {
    width: min(460px, 100%);
    justify-self: center;
  }

  .manager-topbar,
  .manager-actions,
  .manager-shell :is(.system-panel, .invite-panel, .feedback-item) > header,
  .manager-shell .user-panel-head > div {
    flex-wrap: wrap;
  }

  .manager-shell .filters input {
    min-width: 0;
    max-width: 100%;
  }

  .manager-shell .trend-chart {
    overflow-x: auto;
  }

  @container workbench (max-width: 1280px) {
    .project-settlement-overview {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container workbench (max-width: 1100px) {
    #newProjectPane .project-form,
    #projectDetailPane .project-information-form,
    .profile-page-content {
      grid-template-columns: minmax(0, 1fr);
    }

    #projectsPane .project-overview {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #projectsPane .project-overview-intro {
      grid-column: 1 / -1;
    }

    .workspace-overview-grid,
    .manager-shell .system-panel dl {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supplier-settlement-workspace,
    .settlement-expense-detail-columns {
      grid-template-columns: minmax(0, 1fr);
    }

    .supplier-settlement-directory {
      border-right: 0;
      border-bottom: 1px solid #d6e0ea;
    }

    .supplier-settlement-directory-list {
      grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    }
  }

  @container workbench (max-width: 900px) {
    #productsPane .library-layout {
      grid-template-columns: minmax(0, 1fr);
      height: auto;
      overflow: visible;
    }

    #productsPane .library-form,
    #productsPane .library-list-panel,
    #productsPane .library-list {
      position: static;
      height: auto;
      max-height: none;
      overflow: visible;
    }

    #templatesPane .template-actions,
    #historyPane .template-actions,
    .project-album-layout,
    .contract-service-layout,
    .manager-shell .trend-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .contract-template-head {
      align-items: stretch;
      flex-direction: column;
    }

    .contract-template-head .project-upload-actions {
      justify-content: flex-start;
    }

    .settlement-expense-summary {
      grid-template-columns: minmax(0, 1fr);
    }

    .supplier-invoice-import-item {
      grid-template-columns: 64px minmax(0, 1fr);
    }

    .supplier-invoice-import-item label,
    .supplier-invoice-import-item > button:not(.supplier-invoice-import-preview) {
      grid-column: 1 / -1;
    }
  }

  @container workbench (max-width: 620px) {
    .project-settlement-tabs,
    .project-settlement-switch-actions {
      flex-basis: 100%;
      width: 100%;
    }

    .project-settlement-tabs button {
      flex: 1 1 0;
      min-width: 0;
    }

    #newProjectPane .project-form,
    #projectDetailPane .project-information-form {
      width: calc(100% - 20px);
      margin: 14px auto 20px;
    }

    .project-form-section,
    #projectDetailPane .project-information-form .project-form-section {
      padding: 16px;
    }

    #projectsPane .project-page-head,
    #projectsPane .project-page-tools,
    #newProjectPane .project-form-actions,
    .workspace-list-head,
    .history-card-heading {
      align-items: stretch;
      flex-direction: column;
    }

    #projectsPane .project-page-tools input {
      flex-basis: auto;
      width: 100%;
    }

    .workspace-head-note {
      display: none;
    }

    #newProjectPane .project-form-actions {
      position: static;
    }

    #newProjectPane .project-form-actions > div {
      flex-wrap: wrap;
    }

    #templatesPane .template-save-box,
    .template-meta-grid,
    .profile-account-summary,
    .activity-change,
    .project-settlement-overview {
      grid-template-columns: minmax(0, 1fr);
    }

    #templatesPane .template-list,
    #historyPane .template-list,
    #projectsPane .project-list {
      padding: 12px;
    }

    .project-file-item,
    .project-upload-card {
      align-items: stretch;
      flex-direction: column;
    }

    .project-file-item .card-actions {
      justify-content: flex-start;
    }

    .team-invite-fields,
    .shared-module-options {
      grid-template-columns: minmax(0, 1fr);
    }

    .account-team-add label {
      flex-basis: 100%;
    }

    .customer-heading,
    .public-notes {
      padding: 16px;
    }

    .settlement-overview-card,
    .supplier-settlement-panel,
    .supplier-invoice-import-panel {
      padding: 14px;
    }
  }

  @container settlement-card (max-width: 420px) {
    .settlement-allocation-row,
    .settlement-contract-tax-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settlement-allocation-row > button {
      justify-self: start;
    }

    .settlement-card-row {
      gap: 8px !important;
    }
  }

  @container fields (max-width: 420px) {
    .project-form-grid,
    #projectDetailPane .project-information-form .project-form-grid,
    .profile-page-form,
    .profile-sms-control,
    #productsPane .library-search {
      grid-template-columns: minmax(0, 1fr);
    }

    #productsPane .product-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-avatar-editor {
      flex-wrap: wrap;
    }
  }
}