mashlib/dist/mash.css

Data mashup library

/* Styles extracted from manager.js */

.obj {
  margin: 0.2em;
  border: none;
  padding: 0;
  vertical-align: top;
}

.pred, .pred.internal {
  /* Add any specific styles for predicate TDs here */
}

.iconTD {
  margin: 0.2em;
  border: none;
  padding: 0;
  vertical-align: top;
  width: 0px;
}

.labelTD {
  width: 100%;
}

.paneIconTray {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.paneShown {
  width: 24px;
  border: none !important;
  border-radius: var(--border-radius-md, 0.5rem);
  margin-left: var(--spacing-small, 0.1rem);
  padding: 0.188rem; /* 3px */
  background-color: var(--header-menu-item-hover, #e6dcff) !important;
}

.paneHidden {
  width: 24px;
  border-radius: var(--border-radius-md, 0.5rem);
  margin-left: var(--spacing-small, 0.1rem);
  padding: 0.188rem; /* 3px */
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.strongHeader {
  font-size: 150%;
  margin: 0 0.6rem 0 0;
  padding: 0.1rem 0.4rem;
}

.tableFullWidth {
  width: 100%;
  background: var(--color-background, #F8F9FB) !important;
}

.placeholderTable {
  width: 100%;
}

.tdFlex {
  margin: var(--spacing-xxxs, 0.2rem);
  border: none;
  padding: 0;
  vertical-align: top;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

/* CVCard.css */
/* Note: Uses utilities: .section-title for cvOrg styling */

.cvSection {
  margin-bottom: 1.25em;
}

.cvSection > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cvRole {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cvRole:last-child {
  margin-bottom: 0;
}

.cvRoleHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.cvRoleHeader h4,
.cvRoleHeader time {
  margin: 0;
}

.cvRolePeriod {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

@media (max-width: 640px) {
  .cvRoleHeader {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cvOrg {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.cvDescriptionWrap {
  margin: 0;
  position: relative;
  isolation: isolate;
}

.cvDescriptionText {
  margin: 0;
  width: 100%;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: var(--line-height-base);
  padding-right: 4.5em;
  overflow: hidden;
}

.cvDescriptionText.isExpanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  padding-right: 0;
  overflow: visible;
}

.cvDescriptionToggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base, 1.5);
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--color-card-bg);
  white-space: nowrap;
  min-height: auto;
  min-width: auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  z-index: 0;
}

.cvDescriptionWrap .cvDescriptionText:not(.isExpanded) + .cvDescriptionToggle {
  top: calc(100% - 1.5em + 0.28em - 11px);
  bottom: auto;
  transform: translateY(7px);
}

.cvDescriptionText.isExpanded + .cvDescriptionToggle {
  position: static;
  display: inline;
  padding-left: 0;
  top: auto;
  bottom: auto;
  transform: none;
}

.cvSkill, .cvLanguage {
  text-align: left;
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.cvSection h3 {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-pale);
  padding-bottom: var(--spacing-xs);
}

/* ChatWithMe.css */
/* Uses utilities: .section-centered, .loading-text, .btn-primary, .btn-transparent */

.chatSection {
  overflow-x: auto;
}

/* ProfileCard.css */
/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */

.profileCard {
  /* Component container */
}

.name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0;
  letter-spacing: var(--letter-spacing-wide);
}

.profile__actions {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base, 1rem);
  margin-bottom: var(--spacing-xs);
}

.buttonSubSection {
  width: 100%;
  min-width: 0;
  display: grid;
}

.buttonSubSection button {
  width: 100%;
  min-width: 0;
}

/* Ensure prompt inputs stretch to fit their container */
.add-friend-button-container input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.profile__qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  /* OLD color: var(--color-text-secondary);
  font-size: 1em;
  margin-bottom: var(--spacing-xs); */
}

.details {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  max-width: 45ch;
  margin-left: auto;
  margin-right: auto;
}

/* ProfileCard styles as regular CSS */
.profile-card {
  border: 1px solid #ccc;
  padding: 16px;
  background: white;
}

/* ProfileView.css */
/* Uses utilities: .section-bg, .text-center */


.profile-grid .profile__main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 0;
  overflow-wrap: anywhere;
  align-items: flex-start;
}

.profile-grid .profile__sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  border-radius: var(--border-radius-base);
  background: var(--color-background, #F8F9FB);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.profile-grid .profile__section {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-base);
  background: var(--white, #FFF);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.profile-grid .profile__section--empty {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}


/* SAM Not sure this is needed, and potentially should be moved somewhere else */
.profile-grid .phone-type {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

@container profile-pane (max-width: 1000px) {
  #main-content.profile-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto !important;
    padding-inline: var(--spacing-sm, 0.75rem) !important;
  }
}


/* QRCodeCard.css */
/* Note: Uses utilities: .text-center */

/* Caption under the QR code */
.qrcode-card__caption {
  text-align: center;
  margin-top: 0;
  padding-bottom: 0.25rem;
  color: var(--gray-800, #1E2939);
  font-size: var(--font-size-md, 1rem); /* 16px */
  font-weight: var(--font-weight-md, 500);
}

.qrcode-card {
  width: 136px;
  margin: 0 auto;
  height: auto;
  flex-shrink: 0;
}

.qrcode-card__frame {
  padding: 1rem 1rem 1.25rem 1.063rem; /* 16px 16px 20px 17px */
  border-radius: var(--border-radius-base, 0.3125rem); /* 5px */
  border: var(--border-width-thin, 0.1rem) solid var(--gray-200, #E5E7EB);
  background: var(--gray-100, #F3F4F6);
}

.qrcode-card [role="img"]:focus {
  outline: var(--border-width-medium, 2px) solid var(--color-primary, #7C4DFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(124,77,255,0.2);
}

.qrcode-card [role="img"] {
  width: 136px;
  height: 136px;
}

.qrcode-card [role="img"] svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* SocialCard.css */
/* Uses utilities: .list-reset, .text-wrap-anywhere, .flex, .gap-sm, .gap-lg, .rounded-sm */

.socialList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  justify-content: flex-start;
}

.socialItem {
  display: flex;
  align-items: center;
}

.socialItem a {
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: var(--min-touch-target);
  padding: var(--spacing-xxs); 
  border-radius: var(--border-radius-base);
  transition: background-color var(--animation-duration) ease;
  position: relative;
  flex: 1;
  min-width: 0;
}

.socialItem a:hover,
.socialItem a:focus {
  text-decoration: underline;
  background-color: rgba(124, 77, 255, 0.1);
}

/* Screen reader only external link indication */
.socialItem a[href^="http"]:after {
  content: " (external link)";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.socialIcon {
  width: var(--icon-base);
  height: var(--icon-base);
  border-radius: var(--border-radius-base);
  background: var(--color-card-bg);
  flex-shrink: 0;
}

.socialCard__more-button {
  display: none;
}

@media (max-width: 1000px) {
  .socialCard .socialList {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    justify-content: flex-start;
  }

  .socialCard[data-mobile-expanded="true"] .socialList {
    grid-template-columns: repeat(3, max-content);
  }

  .socialCard[data-mobile-expanded="false"] .socialItem:nth-child(n + 11) {
    display: none;
  }

  .socialCard__more-button {
    display: inline-flex;
    margin-top: var(--spacing-xs);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary, #7C4DFF);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .socialCard[data-mobile-expanded="true"] .socialCard__more-button {
    display: none;
  }
}

/* Utility-first CSS classes for layout, spacing, and responsiveness */
/* These utilities are designed specfically for the profile pane */
/* Utilities that can be shared by all panes should be added to dev-globals.css 
   and to mashlib repo mash-utilities.css and then updated accross all pane
   development environments */
:root {
  --profile-image-size: 3em;
}

.profile-pane-host {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .profile-grid {
    font-size: clamp(0.9rem, 1.1vw + 0.65rem, 1rem);
  }

  .profile-grid .profile__action-button,
  .profile-grid .profile__actions button {
    min-height: calc(var(--min-touch-target, 44px) + 0.5em) !important;
    font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
    padding: 0.75em 0.9em !important;
  }
}

/* ===========================================
   PROFILE GRID LAYOUT
   =========================================== */

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--spacing-xxs, 0.3125rem);
  background: var(--color-background, #F8F9FB);
}

.profile-grid > * {
  min-width: 0;
}

.profile-pane-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  container-name: profile-pane;
  container-type: inline-size;
}

/* Embedded rendering inside SolidOS outline table cells needs a single-column fallback.
   The outline reserves space for icon/predicate columns, so the available content width
   is effectively much narrower than the viewport. */
td.obj .profile-pane-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@container profile-pane (max-width: 768px) {
  .profile-grid {
    font-size: clamp(0.9rem, 1.1vw + 0.65rem, 1rem);
  }

  .profile-grid .profile__action-button,
  .profile-grid .profile__actions button {
    min-height: calc(var(--min-touch-target, 44px) + 0.5em) !important;
    font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
    padding: 0.75em 0.9em !important;
  }
}

@container profile-pane (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xxs, 0.3125rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-inline: var(--spacing-xxs, 0.3125rem);
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xxs, 0.3125rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-inline: var(--spacing-xxs, 0.3125rem);
    overflow-x: clip;
  }
}

/* END GRID LAYOUT */

.profile__section {
  width: 100%;
}

.profile__section--empty {
  padding: var(--spacing-1xl, 2.5rem) var(--spacing-lg, 1.5625rem); /* 40px 25px */
  width: 100%;
}

.profile__section,
.profile__section--empty,
.profile__action-button--empty {
  background: var(--color-card-bg, #fff);
}

/* Header row layout utility for profile section headers */
.profile__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs, 0.75rem);
  width: 100%;
}

.profile__section-header h2,
.profile__section-header h3,
.profile__section-header h4 {
  margin: 0;
}

.profile__action-button {
  width: 100%;
  min-width: 11.25rem; /* 180px */
  max-width: 20rem; /* 320px */
  box-sizing: border-box;
  display: inline-block;
}

.profile__action-button--empty {
  /*padding: 6px 8px; Note: these are the styles from new design
  min-height: auto;   however they don't meet accessibility guidelines 
  min-width: 0;       for touch target size */ 
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  white-space: nowrap;
  box-sizing: border-box;
  border: var(--border-width-sm, 1px) solid var(--color-border-darker, #4A5565);
  color: var(--slate-700, #314158);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-tight, 1.4);
}
.profile__empty-state-message {
  color: #62748E;
  text-align: center;
  font-size: var(--font-size-xs, 0.813rem); /* 13px */
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-tight, 1.4); /* 140% from design 18.2px */
}
.contact-info__icon-wrapper {
  width: 36px;
  height: 36px;
  padding: 0 0.575rem; /* 9.2px - from design, but also ensures icons are centered in the circle */
  flex-shrink: 0;
}

.contact-info__icon {
  width: var(--icon-xxs, 1rem); /* 16px */
  height: var(--icon-xxs, 1rem); /* 16px */
  flex-shrink: 0;
  stroke-width: 1.333px;
  stroke: #90A1B9;
}

.contact-info__contact-point-value {
  color: var(--slate-800, #1D293D);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-bold, 600);
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-info__contact-point-type {
  color: var(--slate-500, #62748E);
  font-size: var(--font-size-xxs, 0.75rem); /* 12px */
  font-weight: var(--font-weight-md, 500);
}

.contact-info__address {
  color: var(--slate-800, #1D293D);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-bold, 600);
}

.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-2xs, 0.625rem) 0;
  gap: var(--spacing-2xs, 0.625rem);
}

.contact-info__list:last-of-type {
  padding-bottom: 0;
}

.contact-info__list + .contact-info__list {
  margin-top: var(--spacing-2xs, 0.625rem);
}

.contact-info__item {
  margin-inline-start: 0;
}

.contact-info__empty-icon svg {
  width: var(--icon-md, 2.5rem); /* 40px */
  height: var(--icon-md, 2.5rem); /* 40px */
  display: block;
}

.contact-info__empty-icon svg path {
  stroke-width: 0.25rem; /* 4px */
  stroke: #E5E7EB;
}

.contact-info__empty-message {
  color: #9CA3AF;
  text-align: center;
  font-size: var(--font-size-xs, 0.813rem); /* 13px */
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-tight, 1.4); /* design says 1.2 */
}

.contact-info__empty-icon-wrapper {
  width: 3rem; /* 48px */
  flex: 1 0 0;
}
.profile__empty-state-content {
  gap: var(--spacing-2xs, 0.625rem); /* 10px */
}

.profile__empty-state-content > h2,
.profile__empty-state-content > p {
  margin: 0;
}

/* SAM - generated by ai below need to check design and change */
.profile__action-button--empty:hover {
  background: var(--color-primary, #7C4DFF);
  border-color: var(--color-primary, #7C4DFF);
  color: white;
}

.profile__add-more-content {
  gap: var(--spacing-xxs, 0.3125rem);
}

.profile__add-more-icon {
  width: var(--icon-xxxs, 0.75rem); /* 12px */
  height: var(--icon-xxxs, 0.75rem); /* 12px */
  line-height: 0;
  flex: 0 0 auto;
}

.profile__add-more-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.skills__list {
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  gap: 0.5rem; /* 8px */
}

.skills__item {
  gap: 0.2rem;
}

.skills__item-label {
  color: var(--slate-900, #0F172B);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-md, 500);
  line-height: 1.2;
}

.skills__remove-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.languages__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.languages__item-label {
  color: var(--gray-900, #101828);
  font-size: var(--font-size-md, 1rem); /* 16px */
  font-weight: var(--font-weight-md, 500);
}

.languages__empty-icon {
  width: var(--icon-xs, 1.5rem); /* 24px new design uses this */
  height: var(--icon-xs, 1.5rem); /* 24px new design uses this */
  flex-shrink: 0;
}
/* Add-me-to-friends button style shared across profile sections. */
.profile__btn-friends {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0.375rem 0.75rem;
  gap: var(--spacing-xxs, 0.3125rem);
  border-radius: var(--border-radius-md, 0.5rem);
  border: 1px solid var(--color-primary, #7C4DFF);
  background: transparent;
  color: var(--color-primary, #7C4DFF);
}

/* Text-style action button utility (used for section header/edit actions). */
.profile-action-text {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: var(--spacing-xxs, 0.3125rem);
  border: none;
  background: none;
  color: var(--color-primary, #7C4DFF);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
}

.profile-action-text:hover {
  text-decoration: underline;
}

.profile-section-collapsible {
  display: block;
}

.profile-section-collapsible__header {
  margin-bottom: 0;
}

.profile-section-collapsible__actions {
  gap: var(--spacing-xs, 0.75rem);
  margin-top: -0.25rem;
}

.profile-section-collapsible__edit-button {
  min-width: 0;
}

.profile-section-collapsible__edit-icon {
  display: none;
}

.profile-section-collapsible__actions > button.inline-flex-row {
  display: none !important;
  min-height: auto;
  min-width: auto;
  padding: var(--spacing-xxs, 0.3125rem);
  border: none;
  background: none;
  color: var(--color-text, #1A1A1A);
  cursor: pointer;
}

.profile-section-collapsible__chevron {
  display: inline-block;
  flex: 0 0 auto;
  transition: transform var(--animation-duration, 0.2s) ease;
}

.profile-section-collapsible__content {
  margin-top: var(--spacing-2xs, 0.625rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.profile-section-collapsible__content > :first-child {
  margin-top: 0;
}

.profile-section-collapsible__content > :last-child {
  margin-bottom: 0;
}

.bioCard,
.bioSection,
.socialCard,
.socialList,
.skills__list,
.languages__list,
.contact-info__list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .profile-section-collapsible > .profile-section-collapsible__content {
    display: block;
  }

  .profile-section-collapsible__edit-label svg,
  .profile__action-icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .profile-section-collapsible__edit-label svg path,
  .profile__action-icon svg path {
    fill: var(--color-primary, #7C4DFF);
  }

  .profile-section-collapsible__edit-label {
    display: inline;
    transform: translateY(-0.125rem);
  }

  .profile__add-more-icon {
    transform: translateY(-0.125rem);
  }

  .profile-section-collapsible__edit-icon {
    display: none;
  }
}

@media (max-width: 576px) {
  .profile-grid .profile__section-header h2,
  .profile-grid .profile__section-header h3,
  .profile-grid .profile__section-header h4,
  .profile-grid .profile__empty-state-content > h2,
  .profile-grid .cvSection h3,
  .profile-grid .profile__name,
  .profile-grid .friends-pane__header-name {
    font-family: inherit !important;
  }

  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
    display: inline-flex !important;
    order: 1;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions > button.inline-flex-row {
    order: 2;
  }

  .profile__section-header h2,
  .profile__section-header h3,
  .profile__section-header h4 {
    font-size: var(--font-size-lg, 1.125rem) !important;
    line-height: 1.2 !important;
  }

  .profile-grid .profile__empty-state-content > h2,
  .profile-grid .cvSection h3 {
    font-size: var(--font-size-lg, 1.125rem) !important;
    line-height: 1.2 !important;
  }

  .profile-grid .profile__name,
  .profile-grid .friends-pane__header-name {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  .profile-grid .profile__pronouns,
  .profile-grid .friends-pane__header-pronouns,
  .profile-grid .friends-pane__friends-pronouns {
    font-family: inherit !important;
    font-size: 0.6875rem !important;
    line-height: 1.1 !important;
  }

  .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
    display: none;
  }

  .profile-section-collapsible__actions.flex-column {
    align-items: flex-end;
    gap: 0.25rem;
  }

  /* Keep empty-section mobile header controls in the same order as regular sections: toggle first, add/edit below. */
  .profile__section--empty .profile-section-collapsible__actions > button.inline-flex-row {
    order: 1;
  }

  .profile__section--empty .profile-section-collapsible__actions > .profile-section-collapsible__edit-button {
    order: 2;
  }

  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
    transform: rotate(180deg);
  }

  .profile-section-collapsible__edit-label {
    display: none !important;
  }

  .profile-section-collapsible__edit-icon {
    display: inline;
  }

  /* Empty-state action buttons use icon-only mobile controls (plus sign). */
  .profile__section--empty .profile-section-collapsible__edit-label {
    display: none !important;
  }

  .profile__section--empty .profile-section-collapsible__edit-icon {
    display: inline !important;
  }

  .profile-section-collapsible .profile-section-collapsible__edit-button {
    display: none !important;
    order: 2;
  }

  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button {
    display: inline-flex !important;
  }
  /* Reassert toggle button layout in collapsible action rows on mobile 
  so utility resets never hide/misalign the control. */
  .profile-section-collapsible__actions > button.inline-flex-row {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .profile-section-collapsible__edit-icon--add svg path {
    fill: #1E2939 !important;
    stroke: #1E2939 !important;
  }

  .profile-section-collapsible__edit-icon--projects svg path {
    stroke-width: 1.714px !important;
    stroke: var(--gray-800, #1E2939) !important;
    fill: none !important;
  }

}

@container profile-pane (max-width: 576px) {
  .profile-grid .profile__section-header h2,
  .profile-grid .profile__section-header h3,
  .profile-grid .profile__section-header h4,
  .profile-grid .profile__empty-state-content > h2,
  .profile-grid .cvSection h3,
  .profile-grid .profile__name,
  .profile-grid .friends-pane__header-name {
    font-family: inherit !important;
  }

  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
    order: 1;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions > button.inline-flex-row {
    order: 2;
  }

  .profile__section-header h2,
  .profile__section-header h3,
  .profile__section-header h4 {
    font-size: var(--font-size-lg, 1.125rem) !important;
    line-height: 1.2 !important;
  }

  .profile-grid .profile__empty-state-content > h2,
  .profile-grid .cvSection h3 {
    font-size: var(--font-size-lg, 1.125rem) !important;
    line-height: 1.2 !important;
  }

  .profile-grid .profile__name,
  .profile-grid .friends-pane__header-name {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  .profile-grid .profile__pronouns,
  .profile-grid .friends-pane__header-pronouns,
  .profile-grid .friends-pane__friends-pronouns {
    font-family: inherit !important;
    font-size: 0.6875rem !important;
    line-height: 1.1 !important;
  }

  .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
    display: none;
  }

  .profile-section-collapsible__actions.flex-column {
    align-items: flex-end;
    gap: 0.25rem;
  }

  .profile__section--empty .profile-section-collapsible__actions > button.inline-flex-row {
    order: 1;
  }

  .profile__section--empty .profile-section-collapsible__actions > .profile-section-collapsible__edit-button {
    order: 2;
  }

  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
    transform: rotate(180deg);
  }

  .profile-section-collapsible__edit-label {
    display: none !important;
  }

  .profile-section-collapsible__edit-icon {
    display: inline;
  }

  .profile__section--empty .profile-section-collapsible__edit-label {
    display: none !important;
  }

  .profile__section--empty .profile-section-collapsible__edit-icon {
    display: inline !important;
  }

  .profile-section-collapsible .profile-section-collapsible__edit-button {
    display: none !important;
    order: 2;
  }

  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button {
    display: inline-flex !important;
  }

  .profile-section-collapsible__actions > button.inline-flex-row {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .profile-section-collapsible__edit-icon--add svg path {
    fill: #1E2939 !important;
    stroke: #1E2939 !important;
  }

  .profile-section-collapsible__edit-icon--projects svg path {
    stroke-width: 1.714px !important;
    stroke: var(--gray-800, #1E2939) !important;
    fill: none !important;
  }
}

/* Zebra Striping - used by FriendList, StuffCard tables */
.zebra-stripe tr:nth-child(even),
.zebra-stripe > *:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}


/* CSS for the accessible modal dialogs created by dialog.ts */
/* dialog host */
#profile-modal {
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
}

#profile-modal:not([open]) {
  display: none;
}

#profile-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#profile-modal .modal {
  box-sizing: border-box;
  margin: 0;
  background: var(--color-background);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-base);
  max-width: 100%;
  width: min(640px, 92vw);
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#profile-modal .modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-sm) calc(-1 * var(--spacing-lg));
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem) 0 0;
  border: var(--border-width-sm, 0.1rem) solid var(--slate-200, #E2E8F0);
  background: var(--slate-50, #F8FAFC);
}

#profile-modal .modal #modal-title {
  margin: 0;
}

#profile-modal .modal #modal-header-action > button[aria-label="Close dialog"] {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

#profile-modal .modal #modal-header-action > button[aria-label="Close dialog"]:hover {
  color: var(--color-primary);
}

#profile-modal .modal #modal-header-action {
  display: flex;
  align-items: center;
}

#profile-modal .modal .modal__header-action-button {
  min-height: auto;
  padding: var(--spacing-xxs);
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 500;
}

#profile-modal .modal .modal__header-action-button:hover {
  text-decoration: underline;
}

/* button container: center buttons horizontally (uses id in markup) */
#profile-modal #modal-buttons {
  display: flex;
  padding: 20px 0 20px 30px;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  align-self: stretch;
  border-top: var(--border-width-sm, 0.1rem) solid var(--slate-200, #E2E8F0);
  background: var(--gray-50, #F9FAFB);
}

#profile-modal #modal-buttons button {
  width: 10.8rem;
}

#profile-modal .modal__error-section {
  margin-top: var(--spacing-sm);
}

#profile-modal .modal__error-section[hidden] {
  display: none !important;
}


/* buttons themselves use the shared btn-primary rules */
#profile-modal .modal button {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--animation-duration) ease;
}

#profile-modal .modal button.btn-primary {
  background: var(--color-primary);
  color: var(--white, #FFF);
  font-size: var(--font-size-lg, 1.125rem); /* 18px */
  font-weight: var(--font-weight-bold, 600);
}

#profile-modal .modal button.btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 90%, black);
  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
}

#profile-modal .modal button.btn-primary:active {
  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
}

#profile-modal .modal button:disabled {
  opacity: var(--opacity-disabled, 0.6);
  cursor: not-allowed;
  transform: none;
}

/* Keep text-style actions in section headers while preserving footer button styling. */
#profile-modal .modal .profile__section-header .profile__action-button {
  min-height: auto;
  padding: var(--spacing-xxs);
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 500;
}

#profile-modal .modal .profile__section-header .profile__action-button:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  #profile-modal {
    padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    padding-right: var(--spacing-sm);
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    padding-left: var(--spacing-sm);
    place-items: center;
  }

  #profile-modal .modal {
    width: min(420px, calc(100% - 2 * var(--spacing-sm)));
    max-width: 420px;
    max-height: calc(100dvh - 2 * var(--spacing-sm));
    padding: var(--spacing-md);
    border-radius: calc(var(--border-radius-base) * 0.75);
    overscroll-behavior: contain;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  #profile-modal .modal .modal-header {
    gap: var(--spacing-md);
    margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-sm) calc(-1 * var(--spacing-md));
    padding: var(--spacing-md);
  }

  #profile-modal #modal-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.938rem);
    padding: var(--spacing-md) 0 0;
    margin: var(--spacing-md) auto 0;
    box-sizing: border-box;
    width: 100%;
  }

  #profile-modal #modal-buttons button {
    flex: 0 0 auto;
    width: 10.8rem;
    min-width: 8.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md, 1rem);
  }

}

.profile-edit-dialog__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.profile__edit-form {
  width: 100%;
}

.profile-edit-dialog__section h4 {
  margin: 0;
}

.profile-edit-dialog__section fieldset {
  width: 100%;
  margin: 0;
  display: grid;
  gap: var(--spacing-sm);
  border: 0;
  padding: 0;
  min-inline-size: 0;
}
.profile-edit-dialog__field-description {
  color: var(--gray-600, #4A5565);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-normal, normal);
  line-height: var(--line-height-base, 1.5); /* 21px */
}

.profile-edit-dialog__bio-field-container {
  display: flex;
  width: 100%;
  max-width: 34rem;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs, 0.75rem);
  box-sizing: border-box;
  margin: 0;
}

.profile-edit-dialog__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  max-width: 34rem;
}

.profile-edit-dialog__section--resume fieldset {
  gap: var(--spacing-xs, 0.75rem);
}

.profile-edit-dialog__row--language {
  margin-left: calc(-1 * var(--spacing-xs, 0.75rem));
}

.profile-edit-dialog__row--social {
  margin-left: calc(-1 * var(--spacing-2xs, 0.625rem));
  max-width: 100%;
  width: 100%;
}

.profile-edit-dialog__field--social-type {
  flex: 0 0 7rem;
  width: 7rem;
  max-width: 7rem;
}

.profile-edit-dialog__field--social-url {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-edit-dialog__row--full {
  max-width: 100%;
  width: 100%;
}

.profile-edit-dialog__row--project {
  max-width: 100%;
  width: 100%;
}

.profile-edit-dialog__row--resume-entry-header {
  align-items: center;
  border-bottom: 1px solid var(--gray-400, #99A1AF);
}

.profile-edit-dialog__row--resume-entry-header > .profile-edit-dialog__entry-heading {
  margin: 0;
}

.profile-edit-dialog__entry-heading {
  margin: 0;
  color: var(--gray-700, #364153);
  font-size: var(--font-size-sm, 0.875rem);
  font-style: normal;
  font-weight: var(--font-weight-md, 500);
  line-height: normal;
}

.educationEditSection .profile-edit-dialog__section-heading {
  margin: 0;
  color: var(--gray-700, #364153);
  font-size: 16px;
  font-weight: 500;
}

.profile-edit-dialog__row--resume-entry-header .profile-edit-dialog__delete-button,
#profile-modal .modal .profile-edit-dialog__row--resume-entry-header button.profile-edit-dialog__delete-button {
  min-height: 1.75rem;
  min-width: 1.75rem;
}

/* Force two direct children to split the row into equal columns. */
.profile-edit-dialog__row--equal > .profile-edit-dialog__field,
.profile-edit-dialog__row--equal > .profile-edit-dialog__field-type {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog__image-preview {
  display: grid;
  gap: var(--spacing-xs);
}

.profile-edit-dialog__image-preview-label,
.profile-edit-dialog__image-preview-description {
  margin: 0;
}

.profile-edit-dialog__image-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.profile-edit-dialog__image-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.profile-edit-dialog__image-camera-button {
  display: none;
  position: absolute;
  right: var(--spacing-2xs, 0.625rem);
  bottom: var(--spacing-2xs, 0.625rem);
  z-index: 1;
}

/* Override modal-wide button defaults for the small camera overlay control. */
#profile-modal .modal button.profile-edit-dialog__image-camera-button {
  display: none !important;
  position: absolute;
  right: var(--spacing-2xs, 0.625rem);
  bottom: var(--spacing-2xs, 0.625rem);
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 3px;
  background: var(--white, #FFF);
  border-radius: 3.333px;
  box-shadow: 0 0 4.444px 0 rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.profile-edit-dialog__image-camera-button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: block;
  flex-shrink: 0;
}
.profile-edit-dialog__image-camera-capture-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.profile-edit-dialog--heading .profile-edit-dialog__image-camera-capture-row {
  margin-bottom: calc(var(--spacing-lg, 1.25rem) / -2);
}

.profile-edit-dialog__image-camera-capture-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--spacing-xs, 0.625rem) / 2);
  margin-bottom: var(--spacing-xs, 0.625rem);
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px;
}

.profile-edit-dialog--heading .profile-edit-dialog__image-camera-capture-frame {
  margin-top: calc(var(--spacing-xs, 0.625rem) / 4);
  margin-bottom: calc(var(--spacing-xs, 0.625rem) / 2);
}

.profile-edit-dialog__image-camera-capture-frame[hidden] {
  display: none;
}

.profile-edit-dialog__image-camera-capture-frame table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.profile-edit-dialog__image-camera-capture-frame td {
  text-align: center;
  vertical-align: middle;
}

.profile-edit-dialog__image-camera-capture-frame tr:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-2xs, 0.625rem);
}

.profile-edit-dialog__image-camera-capture-frame tr:last-child td {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
}

.profile-edit-dialog__image-camera-capture-frame tr:last-child td:first-child {
  margin-right: auto;
}

#profile-modal .modal .profile-edit-dialog__image-camera-capture-frame tr:last-child td:first-child button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-edit-dialog__camera-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-edit-dialog__camera-control-actions {
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: var(--spacing-2xs, 0.625rem);
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--spacing-2xs, 0.625rem) / 2);
  align-self: center;
}

.profile-edit-dialog__camera-control-cancel {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gray-600, #4A5565) !important;
  margin-right: 0 !important;
}

.profile-edit-dialog__camera-control-cancel svg {
  display: block;
}

#profile-modal .modal .profile-edit-dialog__camera-control-cancel:hover,
#profile-modal .modal .profile-edit-dialog__camera-control-cancel:focus-visible {
  background: transparent !important;
  border: 0 !important;
  color: var(--gray-900, #101828) !important;
}
/*   display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--gray-300, #D5D7DA) !important;
  -- background: var(--gray-200, #E5E7EB) !important; 
  background: var(--gray-100, #FFF) !important;
  color: var(--gray-700, #364153) !important;
  box-shadow: none !important;
  border-radius: 0.375rem;
  font-weight: var(--font-weight-md, 500); */
.profile-edit-dialog__camera-control-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--font-size-xxs, 0.75rem) !important; /* 12 px */
  font-weight: var(--font-weight-xbold, 700) !important;
  line-height: var(--line-height-base, 1.5) !important; /* 150% */
  border-radius: var(--border-radius-base, 0.3125rem) !important;
  border: 0.8px solid var(--gray-300, #D1D5DC) !important;
  color: var(--gray-900, #101828) !important;
  background: var(--white, #FFF) !important;
  padding: 6.6px 11.075px 7px 12.8px !important;
}

#profile-modal .modal .profile-edit-dialog__camera-control-actions button:hover,
#profile-modal .modal .profile-edit-dialog__camera-control-actions button:focus-visible {
  background: var(--gray-100, #F3F4F6) !important;
  border-color: var(--gray-400, #99A1AF) !important;
}

.profile-edit-dialog__image-camera-capture-frame video,
.profile-edit-dialog__image-camera-capture-frame canvas {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 0.5rem;
  margin: 0 auto;
}

#profile-modal .modal .profile-edit-dialog__image-camera-capture-frame button {
  font-size: var(--font-size-sm, 0.875rem);
}

.profile-edit-dialog__image-upload-button,
.profile-edit-dialog__image-remove-button {
  min-height: var(--min-touch-target, 44px);
  padding: 0 var(--spacing-sm);
}

.profile-edit-dialog__field,
.profile-edit-dialog__field-type {
  display: block;
  margin: 0;
}

.profile-edit-dialog__field-type {
  width: 100%;
}

.profile-edit-dialog__field {
  /* flex: 1 1 auto; */
  min-width: 0;
}

.profile__edit-form--resume .profile-edit-dialog__field,
.profile__edit-form--resume .profile-edit-dialog__field-type:not(.hidden),
.profile__edit-form--contact-info .profile-edit-dialog__field,
.profile__edit-form--contact-info .profile-edit-dialog__field-type:not(.hidden) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs, 0.3125rem);
  flex: 1 0 0;
}

.profile__edit-form--resume .profile-edit-dialog__row {
  max-width: 100%;
  width: 100%;
}

.profile__edit-form--resume .profile-edit-dialog__section fieldset > .profile-edit-dialog__field {
  max-width: 100%;
}

.profile__edit-form--resume .profile-edit-dialog__field > input,
.profile__edit-form--resume .profile-edit-dialog__field > select,
.profile__edit-form--resume .profile-edit-dialog__field > textarea,
.profile__edit-form--resume .profile-edit-dialog__field-type > input,
.profile__edit-form--resume .profile-edit-dialog__field-type > select,
.profile__edit-form--resume .profile-edit-dialog__field-type > textarea,
.profile__edit-form--contact-info .profile-edit-dialog__field > input,
.profile__edit-form--contact-info .profile-edit-dialog__field > select,
.profile__edit-form--contact-info .profile-edit-dialog__field > textarea,
.profile__edit-form--contact-info .profile-edit-dialog__field-type > input,
.profile__edit-form--contact-info .profile-edit-dialog__field-type > select,
.profile__edit-form--contact-info .profile-edit-dialog__field-type > textarea {
  align-self: stretch;
}

.profile-edit-dialog__field--resume-location {
  flex: 1 0 0;
  width: auto;
  max-width: none;
}

.profile-edit-dialog__row--resume-dates {
  max-width: 100%;
  width: 100%;
}

.profile-edit-dialog__field--date-group {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog__date-pair {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.profile-edit-dialog__date-pair > select {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog__field--stack {
  display: grid;
  gap: var(--spacing-xxs);
}

.profile-edit-dialog__field--stack > small {
  display: block;
  width: 100%;
  text-align: right;
}

.profile-edit-dialog__bio-field-container > small {
  align-self: flex-end;
  text-align: right;
}

.profile-edit-dialog__field--full {
  max-width: 100% !important;
  width: 100%;
}

.profile-edit-dialog__field--row-width {
  max-width: 34rem;
  width: 100%;
}

.profile-edit-dialog--heading .profile-edit-dialog__row,
.profile-edit-dialog--heading .profile-edit-dialog__field--row-width {
  max-width: 100%;
  width: 100%;
}

.profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo {
  padding-bottom: calc(var(--spacing-sm, 0.938rem) / 2);
  margin-bottom: calc(var(--spacing-sm, 0.938rem) / 2);
  border-bottom: 1px solid var(--slate-200, #E2E8F0);
}

.profile-edit-dialog--heading .profile-edit {
  gap: calc(var(--spacing-lg, 1.25rem) / 2);
}

.profile-edit-dialog__login-message {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--red-600, #E7000B);
}

.profile-edit-dialog__section + .profile-edit-dialog__login-message {
  margin-top: var(--spacing-sm, 0.938rem);
}

.profile__edit-form--projects .profile-edit-dialog__login-message {
  margin-top: var(--spacing-sm, 0.938rem);
}

.profile-edit-dialog--heading .profile-edit-dialog__row--contact-point {
  max-width: 100%;
  width: 100%;
  gap: var(--spacing-2xs, 0.625rem);
}

.profile-edit-dialog--heading .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog--heading .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field > .label {
  display: block;
  width: 100%;
}

.profile-edit-dialog--heading .profile-edit-dialog__row--contact-point.profile-edit-dialog__row--equal > .profile-edit-dialog__field-type.profile-edit-dialog__field-type--contact-point {
  flex: 0 0 6.4375rem;
  width: 6.4375rem;
  min-width: 6.4375rem;
  max-width: 6.4375rem;
}

.profile-edit-dialog__field-type--contact-point select {
  width: auto;
  max-width: none;
  min-width: 6.4375rem;
}

.profile-edit-dialog__row--address-header {
  max-width: 34rem;
  align-items: flex-end;
}

.profile-edit-dialog__row--inline-end {
  justify-content: flex-end;
  max-width: 100%;
}

.profile-edit-dialog__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  cursor: pointer;
}

.profile-edit-dialog__checkbox-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primary, #7C4DFF);
  cursor: pointer;
}

.profile-edit-dialog__checkbox-input:focus-visible {
  outline: var(--focus-indicator-width, 2px) solid var(--color-primary, #7C4DFF);
  outline-offset: 2px;
}

.profile-edit-dialog__checkbox-input:disabled {
  opacity: var(--opacity-disabled, 0.5);
}

/* The street-address row is a standalone label, so cap its width like the flex rows. */
.profile-edit-dialog__section fieldset > .profile-edit-dialog__field {
  max-width: 34rem;
}

.profile-edit-dialog__field-type--wide {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.profile-edit-dialog__field-type--contact-point {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  align-self: flex-start;
}

.profile-edit-dialog__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profile-edit-dialog__actions--edge {
  margin-left: auto;
}

.profile-edit-dialog__input-wrap {
  position: relative;
  width: 100%;
}

.profile-edit-dialog__input--with-action {
  width: 100%;
  box-sizing: border-box;
  padding-right: 7.5rem;
}

.profile-edit-dialog__input--with-leading-icon {
  width: 100%;
  box-sizing: border-box;
  padding-left: 2.1rem;
}

.profile-edit-dialog__search-icon {
  position: absolute;
  left: var(--spacing-2xs, 0.625rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400, #99A1AF);
  pointer-events: none;
  z-index: 1;
}

.profile-edit-dialog__search-icon svg {
  display: block;
  width: 0.8125rem;
  height: 0.8125rem;
}

.profile-edit-dialog__delete-button {
  min-height: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#profile-modal .modal button.profile-edit-dialog__delete-button {
  min-height: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inheri