/* 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;
}

/* Profile layout styles. */

/* Shell */
:root {
  --profile-image-size: 3rem;
  --profile-interactive-cursor: pointer;
}

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

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

:is(.profile-pane-host, .profile-pane-root)[data-input-mode='touch'] {
  --profile-interactive-cursor: auto;
}

:is(.profile-pane-host, .profile-pane-root)[data-input-mode='pointer'] {
  --profile-interactive-cursor: pointer;
}

td.obj .profile-pane-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Shared controls */
.profile__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs, 0.75rem);
  width: 100%;
}

.profile__section-header:not(.profile-edit-dialog__contact-section-header) h2,
.profile__section-header:not(.profile-edit-dialog__contact-section-header) h3,
.profile__section-header:not(.profile-edit-dialog__contact-section-header) h4 {
  margin: 0;
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: var(--font-weight-md, 500);
}

.profile__action-button,
solid-ui-button.profile__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 11.25rem;
  max-width: 20rem;
  box-sizing: border-box;
}

.profile__add-more-content,
.profile__action-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs, 0.3125rem);
}

.profile__add-more-icon {
  display: inline-block;
  width: var(--icon-xxxs, 0.75rem);
  height: var(--icon-xxxs, 0.75rem);
  margin-right: 0;
  line-height: 0;
  position: relative;
  top: 0;
  transform: translateY(0);
}

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

.profile__btn-friends,
.profile__btn-contacts,
solid-ui-button.profile__btn-friends,
solid-ui-button.profile__btn-contacts {
  width: auto;
  min-width: 0;
  max-width: none;
}

.profile__btn-friends,
.profile__btn-contacts {
  gap: var(--spacing-xxs, 0.3125rem);
}

solid-ui-button.profile__btn-friends,
solid-ui-button.profile__btn-contacts {
  width: auto;
  --button-padding-sm: 0.375rem var(--spacing-xs, 0.75rem);
  --button-border-radius: var(--border-radius-md, 0.5rem);
  --button-padding-x-sm: var(--spacing-xs, 0.75rem);
}

solid-ui-button.profile__btn-friends {
  --button-background: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-border: var(--color-primary, #7C4DFF);
  --button-hover-background: rgba(124, 77, 255, 0.08);
  --button-hover-border: var(--color-primary, #7C4DFF);
  --button-hover-text: var(--color-primary, #7C4DFF);
}

solid-ui-button.profile__btn-contacts {
  --button-background: var(--profile-contacts-button-background, transparent);
  --button-text: var(--profile-contacts-button-color, var(--color-primary, #7C4DFF));
  --button-border: var(--profile-contacts-button-border, var(--color-primary, #7C4DFF));
  --button-hover-background: rgba(124, 77, 255, 0.08);
  --button-hover-border: var(--profile-contacts-button-border, var(--color-primary, #7C4DFF));
  --button-hover-text: var(--profile-contacts-button-color, var(--color-primary, #7C4DFF));
}

.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: var(--profile-interactive-cursor, pointer);
  font-size: var(--font-size-sm, 0.875rem);
}

solid-ui-button.profile-action-text {
  width: auto;
  min-width: 0;
  max-width: none;
  --button-height-sm: 0;
  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-regular, 400);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
}

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

solid-ui-button.profile-action-text:hover::part(button),
solid-ui-button.profile-action-text:focus-visible::part(button) {
  text-decoration: underline;
}

/* Base grid layout */
.profile-grid {
  --profile-main-section-min-width: 37.5rem;
  --profile-sidebar-min-width: 18.75rem;
  --profile-sidebar-width: clamp(var(--profile-sidebar-min-width), 33.333%, 21.875rem);
  --profile-sidebar-section-padding: var(--spacing-lg, 1.5625rem);
  --profile-mobile-section-padding: var(--spacing-sm, 0.9375rem);
  --profile-stacked-section-gap: var(--spacing-sm, 0.9375rem);
  font-size: inherit;
  display: grid;
  grid-template-columns:
    minmax(var(--profile-main-section-min-width), 1fr)
    minmax(var(--profile-sidebar-min-width), var(--profile-sidebar-width));
  align-items: start;
  column-gap: var(--spacing-xxs, 0.3125rem);
  row-gap: var(--spacing-md, 1.25rem);
}

/* Grid columns and wrappers */
.profile-grid .profile__main,
.profile-grid .profile__intro-main,
.profile-grid .profile__intro-sidebar,
.profile-grid .profile__sidebar,
.profile-grid .profile__section,
.profile-grid .profile__section--empty {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.profile-grid .profile__main {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1.25rem);
  margin-bottom: 0;
  overflow-wrap: anywhere;
  align-items: flex-start;
}

.profile-grid .profile__intro-main,
.profile-grid .profile__intro-sidebar {
  display: flex;
  flex-direction: column;
}

.profile-grid .profile__intro-main {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
}

.profile-grid .profile__intro-sidebar {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-width: var(--profile-sidebar-min-width);
  padding-block: 0;
  padding-inline: var(--spacing-sm, 0.938rem);
  background: transparent;
  border-radius: 0;
}

.profile-grid > .profile__sidebar:not(.profile__intro-sidebar) {
  grid-row: 2;
}

.profile-grid .profile__intro-sidebar > .profile__section,
.profile-grid .profile__intro-sidebar > .profile__section--empty {
  flex: 1 1 auto;
  height: 100%;
}

.profile-grid .profile__intro-sidebar > [data-profile-section='social'] {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

.profile-grid .profile__intro-sidebar > [data-profile-section='social'] > .profile-section-collapsible__content {
  flex: 1 1 auto;
}

.profile-grid .profile__sidebar:not(.profile__intro-sidebar) {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: var(--profile-sidebar-min-width);
  padding: var(--spacing-sm, 0.938rem);
  align-items: stretch;
  text-align: left;
  border-radius: var(--border-radius-base);
  background: var(--color-background, #F8F9FB);
  overflow-x: clip;
}

.profile-grid .profile__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1.25rem);
  min-width: var(--profile-sidebar-min-width);
}

.profile-grid .profile__intro-sidebar > .profile__section,
.profile-grid .profile__intro-sidebar > .profile__section--empty,
.profile-grid .profile__sidebar-content > .profile__section,
.profile-grid .profile__sidebar-content > .profile__section--empty {
  min-width: var(--profile-sidebar-min-width);
}

.profile-grid .profile__intro-main > .profile__section,
.profile-grid .profile__intro-main > .profile__section--empty,
.profile-grid .profile__main > .profile__section,
.profile-grid .profile__main > .profile__section--empty {
  min-width: var(--profile-main-section-min-width);
}

.profile-grid > .profile__sidebar:not(.profile__intro-sidebar) {
  padding-top: 0;
}

/* Section cards */
.profile-grid .profile__section,
.profile-grid .profile__section--empty {
  background: var(--color-card-bg, #FFF);
  border: var(--border-width-thin, 0.1rem) solid var(--color-border-lighter, #E2E8F0);
  overflow-x: clip;
}

.profile-grid .profile__section {
  padding: var(--spacing-lg, 1.5625rem);
  border-radius: var(--border-radius-base);
}

.profile-grid .profile__section.profile-section-collapsible {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 1.5625rem);
}

.profile-grid .profile__section--empty {
  padding: var(--spacing-1xl, 2.5rem) var(--spacing-lg, 1.5625rem);
}

.profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
.profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
.profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
.profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
.profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
.profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
.profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
.profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
  padding: var(--profile-sidebar-section-padding);
}

/* Empty states */
.profile-grid solid-ui-button.profile__action-button--empty {
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-medium, 500);
  --button-line-height: var(--line-height-tight, 1.4);
  --button-background: var(--color-card-bg, #FFF);
  --button-text: var(--color-text-primary, #314158);
  --button-border: var(--color-border-darker, #4A5565);
  --button-hover-background: var(--color-primary, #7C4DFF);
  --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
  --button-hover-border: var(--color-primary, #7C4DFF);
}

.profile-grid solid-ui-button.profile__action-button--empty:hover .profile__action-icon svg path,
.profile-grid solid-ui-button.profile__action-button--empty:focus-visible .profile__action-icon svg path,
.profile-grid solid-ui-button.profile__action-button--empty:focus-within .profile__action-icon svg path {
  stroke: var(--color-text-on-action, var(--white, #FFF));
  fill: var(--color-text-on-action, var(--white, #FFF));
}

.profile-grid .profile__empty-state-message {
  color: var(--color-text-empty-state, var(--gray-400, #99A1AF));
  text-align: center;
  font-size: var(--font-size-xs, 0.813rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-tight, 1.4);
  margin-bottom: var(--spacing-md, 1.25rem);
}

.profile-grid .profile__empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs, 0.625rem);
}

.profile-grid .profile__intro-main > .profile__section--empty.profile__section--empty-main,
.profile-grid .profile__main > .profile__section--empty.profile__section--empty-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg, 1.5625rem);
}

.profile-grid .profile__intro-sidebar > .profile__section--empty.profile__section--empty-sidebar,
.profile-grid .profile__sidebar-content > .profile__section--empty.profile__section--empty-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.profile-grid .profile__empty-state-content > h2 {
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: var(--font-weight-md, 500);
}

.profile-grid .profile__section--empty.profile__section--empty-main .profile__empty-state-message {
  margin-bottom: 0;
}

.profile-grid .profile__section--empty .profile-section-collapsible__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-grid .profile__section--empty.profile__section--empty-main .profile-section-collapsible__content {
  gap: var(--spacing-lg, 1.5625rem);
}

.profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
.profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
  display: none;
}

.profile-grid .profile__section--empty.profile__section--empty-main > .profile-section-collapsible__content > .profile__empty-state-content {
  gap: var(--spacing-2xs, 0.625rem);
}

.profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__content,
.profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__content {
  margin-top: 0;
}

/* Theme */
.profile-pane-host[data-theme='dark'] .profile-grid .profile__section,
.profile-pane-host[data-theme='dark'] .profile-grid .profile__section--empty {
  border: var(--border-width-thin, 1px) solid var(--color-border, #444);
}

/* App-driven mobile layout, independent of viewport width. */
.profile-pane-host[data-layout='mobile'] .profile-grid {
  font-size: clamp(0.9rem, 1.1vw + 0.65rem, 1rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--profile-stacked-section-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding-inline: var(--spacing-xxs, 0.3125rem);
  overflow-x: clip;
}

/* App-driven mobile: flatten wrappers */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-main,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-sidebar,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__main,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content {
  display: contents;
}

/* App-driven mobile: section ordering */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='heading'] { order: 1; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='bio'] { order: 2; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='skills'] { order: 3; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='languages'] { order: 4; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='resume'] { order: 5; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='projects'] { order: 6; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='social'] { order: 7; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='contact-info'] { order: 8; }
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='qr-code'] { order: 9; }

/* App-driven mobile: interaction and typography */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__action-button {
  min-height: calc(var(--min-touch-target, 44px) + 0.5rem) !important;
  font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section-header:not(.profile-edit-dialog__contact-section-header) h2,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section-header:not(.profile-edit-dialog__contact-section-header) h3,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section-header:not(.profile-edit-dialog__contact-section-header) h4 {
  font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
  line-height: 1.2 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .friends-pane__header-name {
  font-size: 1.5rem !important;
  line-height: 1.15 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .friends-pane__header-pronouns,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .friends-pane__friends-pronouns {
  font-size: 0.6875rem !important;
  line-height: 1.1 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__empty-state-content > h2,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .resume-card__section h3 {
  font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
  line-height: 1.2 !important;
}

/* App-driven mobile: cards and sidebar */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Keep all mobile section cards at 15px padding across layout, media, and container fallbacks. */
  padding: var(--profile-mobile-section-padding);
  border-radius: var(--border-radius-base, 0.3125rem);
  border: var(--border-width-thin, 0.1rem) solid var(--color-border-subtle, var(--gray-100, #F3F4F6));
  background: var(--color-card-bg, var(--white, #FFF));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='social'].profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='social'].profile__section--empty {
  border: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar {
  padding: 0 !important;
  min-width: 0;
  border-radius: 0;
  background: transparent;
  align-self: stretch;
}

/* App-driven mobile: width and sidebar padding overrides */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-sidebar > .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-sidebar > .profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-main > .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-main > .profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__main > .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__main > .profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > .profile__section--empty {
  min-width: 0;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-sidebar > .profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__intro-sidebar > .profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
  padding: var(--profile-mobile-section-padding);
}

/* App-driven mobile: empty-state presentation */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section.profile-section-collapsible {
  gap: 0;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty.profile-section-collapsible {
  gap: var(--spacing-2xs, 0.625rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
  display: flex;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='projects'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='resume'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2 {
  display: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty .profile__action-button--empty {
  align-self: center;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty .profile__empty-state-content {
  align-items: center;
  text-align: center;
  width: 100%;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty .profile__empty-state-content > h2,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__section--empty .profile__empty-state-content > p {
  text-align: center;
  width: 100%;
}

/* App-driven mobile: profile header and bio actions */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__name {
  font-size: var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)) !important;
  line-height: 1.15 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__role-org {
  font-size: var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)) !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__details {
  font-size: var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)) !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid .profile__pronouns {
  font-size: var(--profile-mobile-header-pronouns-size, 0.6875rem) !important;
  line-height: 1.1 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty .profile-section-collapsible__actions > .profile-section-collapsible__edit-button {
  order: 2;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty .profile-section-collapsible__edit-label {
  display: none !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] [data-profile-section='bio'].profile__section--empty .profile-section-collapsible__actions {
  --profile-section-collapsible-action-button-text: var(--color-text-primary, #314158);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty .profile-section-collapsible__edit-icon {
  display: inline !important;
}

/* Container width guard for embedded panes */
@container profile-pane (max-width: 56.5625rem) {
  #main-content.profile-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto !important;
  }
}

/* Viewport fallback only when layout state is unavailable. */
@media (max-width: 56.5625rem) {
  /* Viewport stacked: layout shell */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid {
    font-size: clamp(0.9rem, 1.1vw + 0.65rem, 1rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--profile-stacked-section-gap);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-inline: var(--spacing-xxs, 0.3125rem);
    overflow-x: clip;
  }

  /* Viewport stacked: interaction and wrappers */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__action-button {
    min-height: calc(var(--min-touch-target, 44px) + 0.5rem) !important;
    font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-main,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__main,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content {
    display: contents;
    min-width: 0;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar:not(.profile__intro-sidebar) {
    padding: 0 !important;
    display: contents;
    border-radius: 0;
    background: transparent;
    align-self: stretch;
  }

  /* Viewport stacked: section ordering */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='heading'] { order: 1; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='bio'] { order: 2; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='skills'] { order: 3; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='languages'] { order: 4; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='resume'] { order: 5; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='projects'] { order: 6; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='social'] { order: 7; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='contact-info'] { order: 8; }
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='qr-code'] { order: 9; }

  /* Viewport stacked: typography */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section-header:not(.profile-edit-dialog__contact-section-header) h2,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section-header:not(.profile-edit-dialog__contact-section-header) h3,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section-header:not(.profile-edit-dialog__contact-section-header) h4 {
    font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
    line-height: 1.2 !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .friends-pane__header-name {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .friends-pane__header-pronouns,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .friends-pane__friends-pronouns {
    font-size: 0.6875rem !important;
    line-height: 1.1 !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--profile-mobile-section-padding);
    border-radius: var(--border-radius-base, 0.3125rem);
    border: var(--border-width-thin, 0.1rem) solid var(--color-border-subtle, var(--gray-100, #F3F4F6));
    background: var(--color-card-bg, var(--white, #FFF));
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='social'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='social'].profile__section--empty {
    border: none;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='bio'].profile__section--empty .profile-section-collapsible__actions {
    --profile-section-collapsible-action-button-text: var(--color-text-primary, #314158);
  }

  /* Viewport stacked: width and sidebar padding overrides */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-main > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-main > .profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__main > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__main > .profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > .profile__section--empty {
    min-width: 0;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
    padding: var(--profile-mobile-section-padding);
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section.profile-section-collapsible {
    gap: 0;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty.profile-section-collapsible {
    gap: var(--spacing-2xs, 0.625rem);
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
    display: flex;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='projects'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='resume'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2 {
    display: none;
  }
}

/* Container-driven stacked layout */
@container profile-pane (max-width: 56.5625rem) {
  /* Container stacked: layout shell */
  .profile-grid {
    font-size: clamp(0.9rem, 1.1vw + 0.65rem, 1rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--profile-stacked-section-gap);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    overflow-x: clip;
  }

  /* Container stacked: interaction and wrappers */
  .profile-grid .profile__action-button {
    min-height: calc(var(--min-touch-target, 44px) + 0.5rem) !important;
    font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
  }

  .profile-grid .profile__intro-main,
  .profile-grid .profile__intro-sidebar,
  .profile-grid .profile__main,
  .profile-grid .profile__sidebar,
  .profile-grid .profile__sidebar-content {
    display: contents;
    min-width: 0;
  }

  .profile-grid .profile__sidebar:not(.profile__intro-sidebar) {
    padding: 0 !important;
    display: contents;
    border-radius: 0;
    background: transparent;
    align-self: stretch;
  }

  /* Container stacked: section ordering */
  .profile-grid [data-profile-section='heading'] { order: 1; }
  .profile-grid [data-profile-section='bio'] { order: 2; }
  .profile-grid [data-profile-section='skills'] { order: 3; }
  .profile-grid [data-profile-section='languages'] { order: 4; }
  .profile-grid [data-profile-section='resume'] { order: 5; }
  .profile-grid [data-profile-section='projects'] { order: 6; }
  .profile-grid [data-profile-section='social'] { order: 7; }
  .profile-grid [data-profile-section='contact-info'] { order: 8; }
  .profile-grid [data-profile-section='qr-code'] { order: 9; }

  /* Container stacked: typography */
  .profile__section-header:not(.profile-edit-dialog__contact-section-header) h2,
  .profile__section-header:not(.profile-edit-dialog__contact-section-header) h3,
  .profile__section-header:not(.profile-edit-dialog__contact-section-header) h4 {
    font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
    line-height: 1.2 !important;
  }

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

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

  .profile-grid .profile__section,
  .profile-grid .profile__section--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--profile-mobile-section-padding);
    border-radius: var(--border-radius-base, 0.3125rem);
    border: var(--border-width-thin, 0.1rem) solid var(--color-border-subtle, var(--gray-100, #F3F4F6));
    background: var(--color-card-bg, var(--white, #FFF));
  }

  .profile-grid [data-profile-section='social'].profile__section,
  .profile-grid [data-profile-section='social'].profile__section--empty {
    border: none;
  }

  .profile-grid [data-profile-section='bio'].profile__section--empty .profile-section-collapsible__actions {
    --profile-section-collapsible-action-button-text: var(--color-text-primary, #314158);
  }

  /* Container stacked: width and sidebar padding overrides */
  .profile-grid .profile__intro-sidebar > .profile__section,
  .profile-grid .profile__intro-sidebar > .profile__section--empty,
  .profile-grid .profile__intro-main > .profile__section,
  .profile-grid .profile__intro-main > .profile__section--empty,
  .profile-grid .profile__main > .profile__section,
  .profile-grid .profile__main > .profile__section--empty,
  .profile-grid .profile__sidebar-content > .profile__section,
  .profile-grid .profile__sidebar-content > .profile__section--empty {
    min-width: 0;
  }

  .profile-grid .profile__intro-sidebar > .profile__section,
  .profile-grid .profile__intro-sidebar > .profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
    padding: var(--profile-mobile-section-padding);
  }

  .profile-grid .profile__section.profile-section-collapsible {
    gap: 0;
  }

  .profile-grid .profile__section--empty.profile-section-collapsible {
    gap: var(--spacing-2xs, 0.625rem);
  }

  .profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
  .profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
    display: flex;
  }

  .profile-grid [data-profile-section='projects'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2,
  .profile-grid [data-profile-section='resume'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2 {
    display: none;
  }
}

/* Narrow-phone fallback once the layout is already stacked. */
@media (max-width: 576px) {
  /* Narrow viewport: cards and sidebar */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar:not(.profile__intro-sidebar) {
    padding: 0 !important;
    display: contents;
    border-radius: 0;
    background: transparent;
    align-self: stretch;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--profile-mobile-section-padding);
    border-radius: var(--border-radius-base, 0.3125rem);
    border: var(--border-width-thin, 0.1rem) solid var(--color-border-subtle, var(--gray-100, #F3F4F6));
    background: var(--color-card-bg, var(--white, #FFF));
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__intro-sidebar > .profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
    padding: var(--profile-mobile-section-padding);
  }

  /* Narrow viewport: empty states */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
    display: flex;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='projects'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid [data-profile-section='resume'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2 {
    display: none;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty .profile__action-button--empty {
    align-self: center;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty .profile__empty-state-content {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty .profile__empty-state-content > h2,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__section--empty .profile__empty-state-content > p {
    text-align: center;
    width: 100%;
  }

  /* Narrow viewport: typography */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__empty-state-content > h2,
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .resume-card__section h3 {
    font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
    line-height: 1.2 !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__name {
    font-size: var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)) !important;
    line-height: 1.15 !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__role-org {
    font-size: var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)) !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__details {
    font-size: var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)) !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile-grid .profile__pronouns {
    font-size: var(--profile-mobile-header-pronouns-size, 0.6875rem) !important;
    line-height: 1.1 !important;
  }

  /* Narrow viewport: empty-state edit actions */
  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section--empty .profile-section-collapsible__actions > .profile-section-collapsible__edit-button {
    order: 2;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section--empty .profile-section-collapsible__edit-label {
    display: none !important;
  }

  :is(.profile-pane-host, .profile-pane-root):not([data-layout]) .profile__section--empty .profile-section-collapsible__edit-icon {
    display: inline !important;
  }
}

/* Narrow container fallback */
@container profile-pane (max-width: 576px) {
  /* Narrow container: cards and sidebar */
  .profile-grid .profile__sidebar:not(.profile__intro-sidebar) {
    padding: 0 !important;
    display: contents;
    border-radius: 0;
    background: transparent;
    align-self: stretch;
  }

  .profile-grid .profile__section,
  .profile-grid .profile__section--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--profile-mobile-section-padding);
    border-radius: var(--border-radius-base, 0.3125rem);
    border: var(--border-width-thin, 0.1rem) solid var(--color-border-subtle, var(--gray-100, #F3F4F6));
    background: var(--color-card-bg, var(--white, #FFF));
  }

  .profile-grid .profile__intro-sidebar > .profile__section,
  .profile-grid .profile__intro-sidebar > .profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='social'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='skills'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='languages'].profile__section--empty,
  .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section,
  .profile-grid .profile__sidebar-content > [data-profile-section='contact-info'].profile__section--empty {
    padding: var(--profile-mobile-section-padding);
  }

  /* Narrow container: empty states */
  .profile-grid [data-profile-section='projects'].profile__section--empty > .profile-section-collapsible__header,
  .profile-grid [data-profile-section='resume'].profile__section--empty > .profile-section-collapsible__header {
    display: flex;
  }

  .profile-grid [data-profile-section='projects'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2,
  .profile-grid [data-profile-section='resume'].profile__section--empty .profile-section-collapsible__content .profile__empty-state-content > h2 {
    display: none;
  }

  .profile-grid .profile__section--empty .profile__action-button--empty {
    align-self: center;
  }

  .profile-grid .profile__section--empty .profile__empty-state-content {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .profile-grid .profile__section--empty .profile__empty-state-content > h2,
  .profile-grid .profile__section--empty .profile__empty-state-content > p {
    text-align: center;
    width: 100%;
  }

  /* Narrow container: typography */
  .profile-grid .profile__empty-state-content > h2,
  .profile-grid .resume-card__section h3 {
    font-size: var(--profile-mobile-section-heading-size, var(--font-size-lg, 1.125rem)) !important;
    line-height: 1.2 !important;
  }

  .profile-grid .profile__name {
    font-size: var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)) !important;
    line-height: 1.15 !important;
  }

  .profile-grid .profile__role-org {
    font-size: var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)) !important;
  }

  .profile-grid .profile__details {
    font-size: var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)) !important;
  }

  .profile-grid .profile__pronouns {
    font-size: var(--profile-mobile-header-pronouns-size, 0.6875rem) !important;
    line-height: 1.1 !important;
  }

  /* Narrow container: empty-state edit actions */
  .profile__section--empty .profile-section-collapsible__actions > .profile-section-collapsible__edit-button {
    order: 2;
  }

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

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

/* Collapsible section styles for the main profile pane. */

/* Base structure */
.profile-section-collapsible {
  display: block;
}

.profile__section--empty.profile-section-collapsible {
  gap: var(--spacing-lg, 1.5625rem);
  border-radius: var(--border-radius-md, 0.5rem);
}

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

.profile-section-collapsible__content {
  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;
}

/* Actions */
.profile-section-collapsible__actions {
  --profile-section-collapsible-action-button-text: var(--color-primary, #7C4DFF);
  --profile-section-collapsible-action-button-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
  --profile-section-collapsible-edit-icon-size: 0.75rem;
  --profile-section-collapsible-mobile-action-gap: 0.25rem;
  --profile-section-collapsible-chevron-width: 0.75rem;
  --profile-section-collapsible-chevron-height: 0.4375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs, 0.75rem);
  margin-top: -0.25rem;
}

.profile-section-collapsible__edit-button {
  min-width: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm, 0.2rem);
  --button-border-radius: var(--border-radius-sm, 0.2rem);
}

.profile-section-collapsible__toggle-button {
  display: none !important;
  align-items: center;
  justify-content: center;
  min-height: auto;
  min-width: auto;
  padding: var(--spacing-xxs, 0.3125rem);
  border-radius: var(--border-radius-sm, 0.2rem);
  border: none;
  background: none;
  color: var(--profile-section-collapsible-action-button-text);
  cursor: var(--profile-interactive-cursor, pointer);
  --button-border-radius: var(--border-radius-sm, 0.2rem);
  --button-height-sm: 0;
  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--profile-section-collapsible-action-button-text);
  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
  --button-hover-border: transparent;
  --button-hover-text: var(--profile-section-collapsible-action-button-text);
}

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

.profile-section-collapsible__edit-icon,
.profile-section-collapsible__edit-icon svg {
  line-height: 0;
}

.profile-section-collapsible__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--profile-section-collapsible-chevron-width);
  height: var(--profile-section-collapsible-chevron-height);
  line-height: 0;
  transition: transform var(--animation-duration, 0.2s) ease;
}

.profile-section-collapsible__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-section-collapsible__edit-icon--add svg path {
  fill: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
  stroke: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
}

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

/* App-driven mobile layout when the host/root explicitly sets data-layout. */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
  flex: 1 1 auto;
  min-width: 0;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--profile-section-collapsible-mobile-action-gap);
  margin-top: 0;
  flex: 0 0 auto;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--profile-section-collapsible-action-button-text);
  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
  --button-hover-border: transparent;
  --button-hover-text: var(--profile-section-collapsible-action-button-text);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
  display: inline-flex !important;
  order: 1;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
  min-width: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  --button-width-sm: var(--min-touch-target, 44px);
  --button-height-sm: var(--min-touch-target, 44px);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
  width: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
  background: var(--profile-section-collapsible-action-button-hover-background);
  text-decoration: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .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;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
  order: 2;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
  display: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__actions.flex-column {
  gap: var(--profile-section-collapsible-mobile-action-gap);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
  transform: rotate(180deg);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-label {
  display: none !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--profile-section-collapsible-edit-icon-size);
  height: var(--profile-section-collapsible-edit-icon-size);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible .profile-section-collapsible__edit-button {
  display: none !important;
  order: 2;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
  display: none !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
  display: inline-flex !important;
}

/* Viewport fallback when no explicit layout attribute is available. */
@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.75rem;
    height: 0.75rem;
    position: relative;
    top: 0;
  }

  .profile-section-collapsible__edit-label {
    color: var(--profile-section-collapsible-action-button-text);
  }

  .profile-section-collapsible__edit-label svg path {
    fill: currentColor;
  }

  .profile-section-collapsible__edit-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs, 0.3125rem);
    transform: translateY(0);
  }

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

/* Container-driven desktop fallback for wide panes inside a mixed viewport. */
@container profile-pane (min-width: 769px) {
  .profile-section-collapsible > .profile-section-collapsible__content {
    display: block;
  }

  .profile-section-collapsible__edit-label svg,
  .profile__action-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    position: relative;
    top: 0;
  }

  .profile-section-collapsible__edit-label {
    color: var(--profile-section-collapsible-action-button-text);
  }

  .profile-section-collapsible__edit-label svg path {
    fill: currentColor;
  }

  .profile-section-collapsible__edit-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs, 0.3125rem);
    transform: translateY(0);
  }

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

/* Viewport fallback for mobile-width panes when no explicit layout attribute is available. */
@media (max-width: 768px) {
  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
    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: var(--profile-section-collapsible-mobile-action-gap);
    margin-top: 0;
    flex: 0 0 auto;
  }

  .profile-section-collapsible__edit-button,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
    --button-background: transparent;
    --button-border-width: 0;
    --button-border: transparent;
    --button-text: var(--profile-section-collapsible-action-button-text);
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
    --button-hover-border: transparent;
    --button-hover-text: var(--profile-section-collapsible-action-button-text);
  }

  .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,
  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
  .profile-section-collapsible__toggle-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-width-sm: var(--min-touch-target, 44px);
    --button-height-sm: var(--min-touch-target, 44px);
  }

  .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
  .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
    width: var(--min-touch-target, 44px);
    min-width: var(--min-touch-target, 44px);
  }

  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
    background: var(--profile-section-collapsible-action-button-hover-background);
    text-decoration: none;
  }

  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
  }

  .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__toggle-button {
    order: 2;
  }

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

  .profile-section-collapsible__actions.flex-column {
    gap: var(--profile-section-collapsible-mobile-action-gap);
  }

  .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-flex;
    align-items: center;
    justify-content: center;
    width: var(--profile-section-collapsible-edit-icon-size);
    height: var(--profile-section-collapsible-edit-icon-size);
  }

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

  .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
  .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
  .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
  .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
    display: none !important;
  }

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

/* Container-driven fallback for mobile-width panes inside a wider viewport. */
@container profile-pane (max-width: 768px) {
  .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
    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: var(--profile-section-collapsible-mobile-action-gap);
    margin-top: 0;
    flex: 0 0 auto;
  }

  .profile-section-collapsible__edit-button,
  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
    --button-background: transparent;
    --button-border-width: 0;
    --button-border: transparent;
    --button-text: var(--profile-section-collapsible-action-button-text);
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
    --button-hover-border: transparent;
    --button-hover-text: var(--profile-section-collapsible-action-button-text);
  }

  .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,
  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
  .profile-section-collapsible__toggle-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-width-sm: var(--min-touch-target, 44px);
    --button-height-sm: var(--min-touch-target, 44px);
  }

  .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
  .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
    width: var(--min-touch-target, 44px);
    min-width: var(--min-touch-target, 44px);
  }

  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
    background: var(--profile-section-collapsible-action-button-hover-background);
    text-decoration: none;
  }

  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
  }

  .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__toggle-button {
    order: 2;
  }

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

  .profile-section-collapsible__actions.flex-column {
    gap: var(--profile-section-collapsible-mobile-action-gap);
  }

  .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-flex;
    align-items: center;
    justify-content: center;
    width: var(--profile-section-collapsible-edit-icon-size);
    height: var(--profile-section-collapsible-edit-icon-size);
  }

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

  .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
  .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
  .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
  .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
    display: none !important;
  }

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

/* Responsive dialog rules and mobile-affecting overrides live separately from the base modal layout. */

#profile-modal .modal:has(.profile-edit-dialog__social-account-select[popup-open]) #modal-desc,
#profile-modal .modal:has(#modal-desc > .profile__edit-form solid-ui-combobox:focus-within) #modal-desc {
  padding-bottom: calc(var(--profile-modal-panel-inline-padding) + 1.875rem);
}

@media (max-width: 576px) {
  #profile-modal {
    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
    padding-top: env(safe-area-inset-top);
    padding-right: 0;
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    padding-left: 0;
    place-items: center;
  }

  #profile-modal .modal {
    width: var(--profile-modal-panel-width);
    max-width: var(--profile-modal-panel-max-width);
    min-width: 0;
    padding: 0;
    border-radius: var(--border-radius-base);
    overscroll-behavior: contain;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  #profile-modal .modal .modal-header {
    gap: var(--spacing-lg, 1.5625rem);
    padding: var(--spacing-sm, 0.938rem);
  }

  #profile-modal .modal #modal-title {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal #modal-desc {
    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
  }

  #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
  }

  #profile-modal #modal-desc > .profile__edit-form--bio {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1.25rem);
  }

  #profile-modal #modal-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--profile-modal-button-gap);
    padding: var(--profile-modal-compact-padding);
    width: 100%;
  }

  #profile-modal #modal-buttons > solid-ui-button {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    --button-font-size-md: var(--font-size-md, 1rem);
  }
}

html[data-layout='mobile'] #profile-modal {
  --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
  padding-top: env(safe-area-inset-top);
  padding-right: 0;
  padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  padding-left: 0;
  place-items: center;
}

html[data-layout='mobile'] #profile-modal .modal {
  width: var(--profile-modal-panel-width);
  height: auto;
  max-height: var(--profile-modal-panel-max-height);
  max-width: var(--profile-modal-panel-max-width);
  min-width: 0;
  padding: 0;
  border-radius: var(--border-radius-base);
  overscroll-behavior: contain;
  justify-self: center;
  align-self: center;
  margin: 0;
}

html[data-layout='mobile'] #profile-modal .modal .modal-header {
  gap: var(--spacing-lg, 1.5625rem);
  padding: var(--spacing-sm, 0.938rem);
}

html[data-layout='mobile'] #profile-modal .modal #modal-title {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-tight, 1.4);
}

html[data-layout='mobile'] #profile-modal .modal #modal-desc {
  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
}

html[data-layout='mobile'] #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
}

html[data-layout='mobile'] #profile-modal #modal-desc > .profile__edit-form--bio {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1.25rem);
}

html[data-layout='mobile'] #profile-modal #modal-buttons {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--profile-modal-button-gap);
  padding: var(--profile-modal-compact-padding);
  width: 100%;
}

html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
  flex: 1 0 0;
  width: auto;
  min-width: 0;
  --button-font-size-md: var(--font-size-md, 1rem);
}

@container profile-pane (max-width: 576px) {
  #profile-modal {
    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
    padding-top: env(safe-area-inset-top);
    padding-right: 0;
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    padding-left: 0;
    place-items: center;
  }

  #profile-modal .modal {
    width: var(--profile-modal-panel-width);
    max-width: var(--profile-modal-panel-max-width);
    min-width: 0;
    padding: 0;
    border-radius: var(--border-radius-base);
    overscroll-behavior: contain;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  #profile-modal .modal .modal-header {
    gap: var(--spacing-lg, 1.5625rem);
    padding: var(--spacing-sm, 0.938rem);
  }

  #profile-modal .modal #modal-title {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal #modal-desc {
    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
  }

  #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
  }

  #profile-modal #modal-desc > .profile__edit-form--bio {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1.25rem);
  }

  #profile-modal #modal-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--profile-modal-button-gap);
    padding: var(--profile-modal-compact-padding);
    width: 100%;
  }

  #profile-modal #modal-buttons > solid-ui-button {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    --button-font-size-md: var(--font-size-md, 1rem);
  }
}

/* CSS for the accessible modal dialogs created by dialog.ts */
/* dialog host */
#profile-modal {
  --profile-modal-backdrop: var(--overlay-bg-muted, rgba(0, 0, 0, 0.5));
  --profile-modal-panel-inline-padding: var(--spacing-lg, 1.5625rem);
  --profile-modal-panel-block-padding: var(--spacing-md, 1.25rem);
  --profile-modal-compact-padding: var(--spacing-sm, 0.9375rem);
  --profile-modal-button-gap: var(--spacing-sm, 0.938rem);
  --profile-modal-error-padding: var(--spacing-xs, 0.75rem);
  --profile-modal-panel-width: min(37.5rem, calc(100vw - 2rem));
  --profile-modal-panel-max-width: 37.5rem;
  --profile-modal-panel-max-height: calc(100dvh - 2rem);
  margin: 0;
  padding: 0;
  border: none;
  background: var(--profile-modal-backdrop);
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
  padding-right: 0;
  padding-bottom: max(var(--spacing-lg, 1.5625rem), env(safe-area-inset-bottom));
  padding-left: 0;
}

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

#profile-modal::backdrop {
  background: var(--profile-modal-backdrop);
}

#profile-modal .modal {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  margin: 0;
  background: var(--color-background);
  border-radius: var(--border-radius-base);
  max-width: var(--profile-modal-panel-max-width);
  width: var(--profile-modal-panel-width);
  max-height: var(--profile-modal-panel-max-height);
  overflow: hidden;
  box-shadow: var(--box-shadow-modal, 0 2px 10px rgba(0, 0, 0, 0.3));
  align-self: center;
}

#profile-modal .modal .modal-header {
  gap: var(--spacing-lg);
  width: 100%;
  min-width: 0;
  padding: var(--profile-modal-panel-block-padding) var(--profile-modal-panel-inline-padding); 
  box-sizing: border-box;
  border-radius: var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem) 0 0;
  border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
  background: var(--color-surface-overlay-header, var(--slate-50, #F8FAFC));
}

#profile-modal .modal #modal-desc {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  width: 100%;
  min-width: 0;
  padding: var(--profile-modal-panel-inline-padding);
  box-sizing: border-box;
}

#profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
  padding: var(--spacing-2xs, 0.625rem) var(--profile-modal-panel-inline-padding);
}

#profile-modal .modal #modal-desc:has(> #contacts-addressbook-picker-dialog) {
  padding-top: 0;
}

#profile-modal #modal-desc > .profile__edit-form--projects {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs, 0.625rem);
}

#profile-modal .modal #modal-title {
  margin: 0;
  color: var(--color-text-subheading, var(--gray-900, #101828));
}

#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"] {
  --button-height-sm: var(--icon-base, 2rem);
  --button-width-sm: var(--icon-base, 2rem);
  --button-padding-sm: 0;
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--color-text);
  --button-border-radius: 999px;
  --button-box-shadow: none;
  --button-hover-background: rgba(0, 0, 0, 0.04);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary);
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  --button-icon-size-sm: var(--icon-xxs, 1rem);
}

#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:hover {
  --button-hover-background: rgba(0, 0, 0, 0.04);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary);
}

#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:focus-visible::part(button) {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha));
}

#profile-modal .modal:has(#modal-desc > .profile__edit-form--projects) #modal-header-action,
#profile-modal .modal:has(#modal-desc > .profile__edit-form--contact-info) #modal-header-action {
  display: none;
}

#profile-modal .modal solid-ui-button.modal__header-action-button {
  --button-height-sm: 0;
  --button-padding-sm: var(--spacing-xxs);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-font-weight: var(--font-weight-md, 500);
  --button-text: var(--color-primary);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary);
}

#profile-modal .modal solid-ui-button.modal__header-action-button:hover::part(button) {
  text-decoration: underline;
}

/* button container: center buttons horizontally (uses id in markup) */
#profile-modal #modal-buttons {
  width: 100%;
  min-width: 0;
  padding: var(--profile-modal-panel-block-padding) calc(var(--profile-modal-panel-inline-padding) + var(--spacing-xxs, 0.3125rem)) var(--profile-modal-compact-padding);
  gap: var(--profile-modal-button-gap);
  align-self: stretch;
  box-sizing: border-box;
  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
  background: var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
}

#profile-modal #modal-buttons[hidden] {
  display: none !important;
}

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

#profile-modal #modal-buttons solid-ui-button[data-dialog-primary='true'] {
  --button-font-size-md: var(--font-size-md, 1rem);
}

#profile-modal #modal-buttons solid-ui-button[data-cancel='true'] {
  --button-font-weight: var(--font-weight-normal, normal);
  --button-text: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
  --button-border: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
  --button-background: var(--dialog-cancel-button-background, transparent);
  --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  --button-font-size-md: var(--font-size-md, 1rem);
}

#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:hover::part(button),
#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-visible::part(button),
#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-within::part(button) {
  background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  border-color: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  color: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
}

#profile-modal .modal__error-section {
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
  padding: var(--profile-modal-error-padding);
  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
  border-radius: var(--border-radius-base);
  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
  color: var(--dialog-error-text, var(--red-600, #B00020));
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

#profile-modal #modal-saving-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  z-index: 10;
}

#profile-modal #modal-saving-overlay[hidden] {
  display: none;
}

#profile-modal.modal--saving #modal-desc {
  opacity: 0.45;
  pointer-events: none;
}

#profile-modal .modal__saving-indicator {
  gap: 0;
}

html[data-layout='mobile'] .profile-edit-dialog__row {
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
}

html[data-layout='mobile'] .profile-edit-dialog__row--equal > .profile-edit-dialog__field,
html[data-layout='mobile'] .profile-edit-dialog__row--equal > .profile-edit-dialog__field-type {
  flex: 1 1 auto;
}

html[data-layout='mobile'] .profile-edit-dialog__field-type {
  flex: 1 1 auto;
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__field--dob {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__row--heading-dob {
  flex-direction: column;
  align-items: stretch;
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__row--heading-dob > .profile-edit-dialog__field,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__row--heading-dob > .profile-edit-dialog__field-type {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob {
  display: block;
  height: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  max-height: var(--min-touch-target, 44px);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: var(--line-height-base, 1.5);
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-date-and-time-value,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit-fields-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-date-and-time-value {
  text-align: center;
  white-space: nowrap;
}

@media (hover: none) and (pointer: coarse) {
  /* Mobile date inputs can ignore the shared 44px field sizing and let the native picker chrome spill past the dialog field. */
  html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob {
    height: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    max-height: var(--min-touch-target, 44px);
    line-height: calc(var(--min-touch-target, 44px) - 2px);
    padding-block: 0;
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
  }

  html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-date-and-time-value,
  html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit,
  html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit-fields-wrapper {
    line-height: calc(var(--min-touch-target, 44px) - 2px);
  }

  html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
  }
}

html[data-layout='mobile'] .profile__edit-form {
  --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
  --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
  --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
}

html[data-layout='mobile'] #profile-modal .modal label.profile-edit-dialog__field,
html[data-layout='mobile'] #profile-modal .modal label.profile-edit-dialog__field-type,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field > .label,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type > .label,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-description,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__entry-heading {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-base, 1.5);
}

html[data-layout='mobile'] .profile-edit-dialog__section-heading {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-tight, 1.4);
}

html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-tight, 1.4);
}

html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__action-button,
html[data-layout='mobile'] #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-base, 1.5);
}

html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-content,
html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
  font-size: var(--font-size-sm, 0.875rem);
}

html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-icon,
html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
  padding: 0.125rem;
  box-sizing: border-box;
}

html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon svg {
  width: 100%;
  height: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog__row--inline-end {
  justify-content: flex-start;
}

html[data-layout='mobile'] .profile-edit-dialog__actions {
  justify-content: flex-start;
}

html[data-layout='mobile'] .profile-edit-dialog__textarea {
  min-height: 15rem !important;
}

html[data-layout='mobile'] .profile-edit-dialog__input--with-action {
  padding-right: 6.5rem;
}

html[data-layout='mobile'] .profile-edit-dialog__paste-button {
  right: var(--spacing-xxs, 0.3125rem);
  --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
  --button-font-size-md: var(--font-size-2xs, 0.6875rem);
  --button-icon-size-md: var(--font-size-xxs, 0.75rem);
  --button-icon-size-lg: var(--font-size-xxs, 0.75rem);
}

html[data-layout='mobile'] .profile-edit-dialog__field input,
html[data-layout='mobile'] .profile-edit-dialog__field select,
html[data-layout='mobile'] .profile-edit-dialog__field-type input,
html[data-layout='mobile'] .profile-edit-dialog__field-type select,
html[data-layout='mobile'] .profile-edit-dialog__textarea {
  font-size: 1rem; 
}

html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field solid-ui-combobox,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type solid-ui-select,
html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type solid-ui-combobox {
  --font-size-sm: 1rem; 
}

html[data-layout='mobile'] #profile-modal .modal solid-ui-combobox::part(input),
html[data-layout='mobile'] #profile-modal .modal solid-ui-combobox::part(option),
html[data-layout='mobile'] #profile-modal .modal solid-ui-combobox::part(selected-option),
html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(select-trigger),
html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(trigger-label),
html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(option),
html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(selected-option) {
  font-size: 1rem;
}


html[data-layout='mobile'] .profile-edit-dialog__input-help-text {
  display: none;
}

html[data-layout='mobile'] .profile-edit-dialog__field-type--contact-point {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--contact-point {
  flex-direction: row;
  align-items: stretch;
}

html[data-layout='mobile'] .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;
}

html[data-layout='mobile'] .profile-edit-dialog__row--address-header {
  flex-direction: row;
  align-items: flex-end;
}

html[data-layout='mobile'] .profile-edit-dialog__row--social {
  margin-left: 0;
  gap: var(--spacing-2xs, 0.625rem);
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

html[data-layout='mobile'] .profile-edit-dialog__row--social .profile-edit-dialog__social-icon {
  display: none;
}

html[data-layout='mobile'] .profile-edit-dialog__field--social-type {
  flex: 0 0 4.75rem;
  width: 4.75rem;
  max-width: 4.75rem;
}

html[data-layout='mobile'] .profile-edit-dialog__field--social-url {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-layout='mobile'] .profile-edit-dialog__field--resume-location {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog__row--language {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-xxs, 0.3125rem);
  margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
}

html[data-layout='mobile'] .profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
}

html[data-layout='mobile'] .profile-edit-dialog__actions--language {
  margin-left: 0;
}

html[data-layout='mobile'] .profile-edit-dialog__row--language > .profile-edit-dialog__drag-handle,
html[data-layout='mobile'] .profile-edit-dialog__actions--language > solid-ui-button.profile-edit-dialog__delete-button {
  min-width: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  --button-height-md: var(--min-touch-target, 44px);
}

html[data-layout='mobile'] .profile-edit-dialog__row--resume-entry-header {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog__row--resume-entry-header > .profile-edit-dialog__actions--edge {
  margin-left: auto;
}

html[data-layout='mobile'] .profile-edit-dialog__row--skill {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-2xs, 0.625rem);
}

html[data-layout='mobile'] .profile-edit-dialog__row--skill > .profile-edit-dialog__field {
  flex: 1 1 0;
  min-width: 0;
}

html[data-layout='mobile'] .profile-edit-dialog__row--skill > .profile-edit-dialog__actions {
  flex: 0 0 auto;
  margin-left: 0;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-xs, 0.75rem);
  width: 100%;
  max-width: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo > header {
  margin-bottom: 0;
  flex: 0 0 auto;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero,
html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
  width: 5rem;
  height: 5rem;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
  padding: 0;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__image-frame--fallback .profile__hero-alt {
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-camera-button {
  display: inline-flex;
  right: var(--spacing-xxs, 0.3125rem);
  bottom: var(--spacing-xxs, 0.3125rem);
  width: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  --button-height-md: var(--min-touch-target, 44px);
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--spacing-xxs, 0.3125rem);
  width: 100%;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-label {
  font-size: var(--profile-edit-dialog-mobile-image-label-font-size);
  line-height: var(--line-height-tight, 1.25);
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-description {
  font-size: var(--profile-edit-dialog-mobile-image-description-font-size);
  line-height: var(--line-height-base, 1.4);
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xxs, 0.3125rem);
  width: 100%;
  align-items: stretch;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button {
  width: 100%;
  min-width: 0;
}

html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button::part(button) {
  min-width: 0;
  width: 100%;
  justify-content: center;
  padding: var(--spacing-xxs, 0.3125rem) var(--spacing-2xs, 0.625rem);
  font-size: var(--profile-edit-dialog-mobile-image-button-font-size);
}

html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-edit-dialog__actions {
  justify-content: flex-end;
}

@media (max-width: 576px) {
  .profile-edit-dialog__row {
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .profile__edit-form {
    --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
    --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
    --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
  }

  .profile-edit-dialog__section-heading {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal .profile__section-header:not(.profile-edit-dialog__contact-section-header) {
    padding: var(--spacing-sm, 0.938rem);
    gap: var(--spacing-lg, 1.5625rem);
  }

  #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal .profile__section-header .profile__action-button,
  #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-base, 1.5);
  }

  #profile-modal .modal .profile__section-header .profile__add-more-content,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile__section-header .profile__add-more-icon,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
    width: var(--icon-xxs, 1rem);
    height: var(--icon-xxs, 1rem);
    padding: 0.125rem;
    box-sizing: border-box;
  }

  #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon svg {
    width: 100%;
    height: 100%;
  }

  .profile-edit-dialog__row--equal > .profile-edit-dialog__field,
  .profile-edit-dialog__row--equal > .profile-edit-dialog__field-type {
    flex: 1 1 auto;
  }

  .profile-edit-dialog__field-type {
    flex: 1 1 auto;
  }

  .profile-edit-dialog__row--inline-end {
    justify-content: flex-start;
  }

  .profile-edit-dialog__actions {
    justify-content: flex-start;
  }

  .profile-edit-dialog__textarea {
    min-height: 15rem !important;
  }

  .profile-edit-dialog__input--with-action {
    padding-right: 6.5rem;
  }

  .profile-edit-dialog__paste-button {
    right: var(--spacing-xxs, 0.3125rem);
    --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
    --button-font-size-md: var(--font-size-2xs, 0.6875rem);
    --button-icon-size-md: var(--font-size-xxs, 0.75rem);
    --button-icon-size-lg: var(--font-size-xxs, 0.75rem);
  }

  .profile-edit-dialog__field input,
  .profile-edit-dialog__field select,
  .profile-edit-dialog__field-type input,
  .profile-edit-dialog__field-type select,
  .profile-edit-dialog__textarea {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
  #profile-modal .modal .profile-edit-dialog__field solid-ui-combobox,
  #profile-modal .modal .profile-edit-dialog__field-type solid-ui-select,
  #profile-modal .modal .profile-edit-dialog__field-type solid-ui-combobox {
    --font-size-sm: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal solid-ui-combobox::part(input),
  #profile-modal .modal solid-ui-combobox::part(option),
  #profile-modal .modal solid-ui-combobox::part(selected-option),
  #profile-modal .modal solid-ui-select::part(select-trigger),
  #profile-modal .modal solid-ui-select::part(trigger-label),
  #profile-modal .modal solid-ui-select::part(option),
  #profile-modal .modal solid-ui-select::part(selected-option) {
    font-size: var(--font-size-sm, 0.875rem);
  }

  .profile-edit-dialog__input-help-text {
    display: none;
  }

  .profile-edit-dialog__field-type--contact-point {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--contact-point {
    flex-direction: row;
    align-items: stretch;
  }

  .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__row--address-header {
    flex-direction: row;
    align-items: flex-end;
  }

  .profile-edit-dialog__row--social {
    margin-left: 0;
    gap: var(--spacing-2xs, 0.625rem);
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .profile-edit-dialog__row--social .profile-edit-dialog__social-icon {
    display: none;
  }

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

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

  .profile-edit-dialog__field--resume-location {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog__row--language {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xxs, 0.3125rem);
    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
  }

  .profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
    flex: 1 1 0;
    min-width: 0;
    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
  }

  .profile-edit-dialog__actions--language {
    margin-left: 0;
  }

  .profile-edit-dialog__row--language > solid-ui-button.profile-edit-dialog__drag-handle,
  .profile-edit-dialog__actions--language > solid-ui-button.profile-edit-dialog__delete-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-height-md: var(--min-touch-target, 44px);
  }

  .profile-edit-dialog__row--resume-entry-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog__row--resume-entry-header > .profile-edit-dialog__actions--edge {
    margin-left: auto;
  }

  .profile-edit-dialog__row--skill {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-2xs, 0.625rem);
  }

  .profile-edit-dialog__row--skill > .profile-edit-dialog__field {
    flex: 1 1 0;
    min-width: 0;
  }

  .profile-edit-dialog__row--skill > .profile-edit-dialog__actions {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs, 0.75rem);
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo > header {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero,
  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
    width: 5rem;
    height: 5rem;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
    padding: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__image-frame--fallback .profile__hero-alt {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-camera-button {
    display: inline-flex;
    right: var(--spacing-xxs, 0.3125rem);
    bottom: var(--spacing-xxs, 0.3125rem);
    width: var(--min-touch-target, 44px);
    height: var(--min-touch-target, 44px);
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-height-md: var(--min-touch-target, 44px);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--spacing-xxs, 0.3125rem);
    width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-label {
    font-size: var(--profile-edit-dialog-mobile-image-label-font-size);
    line-height: var(--line-height-tight, 1.25);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-description {
    font-size: var(--profile-edit-dialog-mobile-image-description-font-size);
    line-height: var(--line-height-base, 1.4);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xs, 0.5rem);
    width: 100%;
    align-items: stretch;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button {
    width: 100%;
    min-width: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button::part(button) {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding: var(--spacing-xxs, 0.3125rem) var(--spacing-2xs, 0.625rem);
    font-size: var(--profile-edit-dialog-mobile-image-button-font-size);
  }

  .profile-edit-dialog__row--address-header .profile-edit-dialog__actions {
    justify-content: flex-end;
  }
}

@container profile-pane (max-width: 576px) {
  .profile-edit-dialog__row {
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .profile__edit-form {
    --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
    --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
    --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
  }

  .profile-edit-dialog__section-heading {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal .profile__section-header:not(.profile-edit-dialog__contact-section-header) {
    padding: var(--spacing-sm, 0.938rem);
    gap: var(--spacing-lg, 1.5625rem);
  }

  #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.4);
  }

  #profile-modal .modal .profile__section-header .profile__action-button,
  #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-base, 1.5);
  }

  #profile-modal .modal .profile__section-header .profile__add-more-content,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile__section-header .profile__add-more-icon,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
    width: var(--icon-xxs, 1rem);
    height: var(--icon-xxs, 1rem);
    padding: 0.125rem;
    box-sizing: border-box;
  }

  #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon svg {
    width: 100%;
    height: 100%;
  }

  .profile-edit-dialog__row--equal > .profile-edit-dialog__field,
  .profile-edit-dialog__row--equal > .profile-edit-dialog__field-type {
    flex: 1 1 auto;
  }

  .profile-edit-dialog__field-type {
    flex: 1 1 auto;
  }

  .profile-edit-dialog__row--inline-end {
    justify-content: flex-start;
  }

  .profile-edit-dialog__actions {
    justify-content: flex-start;
  }

  .profile-edit-dialog__textarea {
    min-height: 15rem !important;
  }

  .profile-edit-dialog__input--with-action {
    padding-right: 6.5rem;
  }

  .profile-edit-dialog__paste-button {
    right: var(--spacing-xxs, 0.3125rem);
    --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
    --button-font-size-md: var(--font-size-2xs, 0.6875rem);
    --button-icon-size-md: var(--font-size-xxs, 0.75rem);
    --button-icon-size-lg: var(--font-size-xxs, 0.75rem);
  }

  .profile-edit-dialog__field input,
  .profile-edit-dialog__field select,
  .profile-edit-dialog__field-type input,
  .profile-edit-dialog__field-type select,
  .profile-edit-dialog__textarea {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
  #profile-modal .modal .profile-edit-dialog__field solid-ui-combobox,
  #profile-modal .modal .profile-edit-dialog__field-type solid-ui-select,
  #profile-modal .modal .profile-edit-dialog__field-type solid-ui-combobox {
    --font-size-sm: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal solid-ui-combobox::part(input),
  #profile-modal .modal solid-ui-combobox::part(option),
  #profile-modal .modal solid-ui-combobox::part(selected-option),
  #profile-modal .modal solid-ui-select::part(select-trigger),
  #profile-modal .modal solid-ui-select::part(trigger-label),
  #profile-modal .modal solid-ui-select::part(option),
  #profile-modal .modal solid-ui-select::part(selected-option) {
    font-size: var(--font-size-sm, 0.875rem);
  }

  .profile-edit-dialog__input-help-text {
    display: none;
  }

  .profile-edit-dialog__field-type--contact-point {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--contact-point {
    flex-direction: row;
    align-items: stretch;
  }

  .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__row--address-header {
    flex-direction: row;
    align-items: flex-end;
  }

  .profile-edit-dialog__row--social {
    margin-left: 0;
    gap: var(--spacing-2xs, 0.625rem);
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .profile-edit-dialog__row--social .profile-edit-dialog__social-icon {
    display: none;
  }

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

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

  .profile-edit-dialog__field--resume-location {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog__row--language {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xxs, 0.3125rem);
    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
  }

  .profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
    flex: 1 1 0;
    min-width: 0;
    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
  }

  .profile-edit-dialog__actions--language {
    margin-left: 0;
  }

  .profile-edit-dialog__row--language > solid-ui-button.profile-edit-dialog__drag-handle,
  .profile-edit-dialog__actions--language > solid-ui-button.profile-edit-dialog__delete-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-height-md: var(--min-touch-target, 44px);
  }

  .profile-edit-dialog__row--resume-entry-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog__row--resume-entry-header > .profile-edit-dialog__actions--edge {
    margin-left: auto;
  }

  .profile-edit-dialog__row--skill {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-2xs, 0.625rem);
  }

  .profile-edit-dialog__row--skill > .profile-edit-dialog__field {
    flex: 1 1 0;
    min-width: 0;
  }

  .profile-edit-dialog__row--skill > .profile-edit-dialog__actions {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero,
  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
    width: 5rem;
    height: 5rem;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs, 0.75rem);
    width: 100%;
    max-width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo > header {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__hero-alt {
    padding: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile__image-frame--fallback .profile__hero-alt {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-camera-button {
    display: inline-flex;
    right: var(--spacing-xxs, 0.3125rem);
    bottom: var(--spacing-xxs, 0.3125rem);
    width: var(--min-touch-target, 44px);
    height: var(--min-touch-target, 44px);
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-height-md: var(--min-touch-target, 44px);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--spacing-xxs, 0.3125rem);
    width: 100%;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-label {
    font-size: var(--profile-edit-dialog-mobile-image-label-font-size);
    line-height: var(--line-height-tight, 1.25);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-description {
    font-size: var(--profile-edit-dialog-mobile-image-description-font-size);
    line-height: var(--line-height-base, 1.4);
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xs, 0.5rem);
    width: 100%;
    align-items: stretch;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button {
    width: 100%;
    min-width: 0;
  }

  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-button::part(button) {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding: var(--spacing-xxs, 0.3125rem) var(--spacing-2xs, 0.625rem);
    font-size: var(--profile-edit-dialog-mobile-image-button-font-size);
  }

  .profile-edit-dialog__row--address-header .profile-edit-dialog__actions {
    justify-content: flex-end;
  }
}

.profile__edit-form {
  --profile-edit-dialog-row-max-width: 34rem;
  --profile-edit-dialog-action-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
  --profile-edit-dialog-muted-text: var(--color-text-secondary, #4A5565);
  --profile-edit-dialog-quiet-text: var(--color-text-primary, var(--gray-700, #364153));
  --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-xxs, 0.75rem);
  --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
  --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
  --profile-edit-dialog-mobile-image-button-padding: 0.4125rem 0.7547rem 0.4375rem 0.8625rem;
  width: 100%;
}

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

.profile-edit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 1.25rem);
}

.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(--profile-edit-dialog-muted-text);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, normal);
  line-height: var(--line-height-base, 1.5);
}

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

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

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

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

.profile-edit-dialog__field {
  min-width: 0;
}

.profile-edit-dialog__field--stack {
  display: grid;
}

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

.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__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-modal .modal .profile__section-header .profile__action-button,
#profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
  min-height: auto;
  padding: var(--spacing-xxs);
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-md, 500);
}

#profile-modal .modal .profile__section-header .profile__action-button:hover,
#profile-modal .modal .profile__section-header solid-ui-button.profile__action-button:hover::part(button) {
  text-decoration: underline;
}

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

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

.profile-edit-dialog__add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.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__delete-icon {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
  fill: currentColor;
}

.profile-edit-dialog__delete-icon svg {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
}

solid-ui-button.profile-edit-dialog__delete-button {
  min-height: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
  color: inherit;
  --button-background: transparent;
  --button-height-md: var(--min-touch-target, 44px);
  --button-padding-md: 0;
  --button-padding-x-sm: 0;
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-base, 0.3125rem);
  --button-text: currentColor;
  --button-box-shadow: none;
  --button-hover-background: var(--profile-edit-dialog-action-hover-background);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  --button-icon-size-md: var(--icon-xxs, 1rem);
  --button-icon-size-lg: var(--icon-xxs, 1rem);
}

solid-ui-button.profile-edit-dialog__delete-button:hover,
solid-ui-button.profile-edit-dialog__delete-button:focus-within {
  color: inherit;
}

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

.profile-edit-dialog__image-preview-header {
  margin-bottom: var(--spacing-md, 1.25rem);
}

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

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

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

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

solid-ui-button.profile-edit-dialog__image-camera-button {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  --button-height-md: 1.25rem;
  --button-padding-md: 0.1875rem;
  --button-icon-size-md: 0.875rem;
  --button-background: var(--color-card-bg, var(--white, #FFF));
  --button-border-width: 0;
  --button-border-radius: 0.2083rem;
  --button-box-shadow: 0 0 0.2778rem 0 rgba(0, 0, 0, 0.25);
  --button-hover-background: var(--color-card-bg, var(--white, #FFF));
  --button-hover-border: transparent;
  --button-hover-text: currentColor;
  --button-hover-box-shadow: 0 0 0.2778rem 0 rgba(0, 0, 0, 0.25);
  --button-active-box-shadow: 0 0 0.2778rem 0 rgba(0, 0, 0, 0.25);
  --button-active-transform: none;
}

.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__image-camera-capture-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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: var(--spacing-2xs, 0.625rem);
  box-sizing: border-box;
  border: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
  border-radius: var(--border-radius-md, 0.5rem);
}

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

.profile-edit-dialog__photo-capture {
  display: block;
  width: 100%;
  --photo-capture-gap: var(--spacing-2xs, 0.625rem);
  --photo-capture-frame-max-width: 260px;
  --photo-capture-surface: transparent;
  --photo-capture-text: var(--color-text-subheading, var(--gray-900, #101828));
  --photo-capture-muted-text: var(--profile-edit-dialog-muted-text);
  --photo-capture-border: var(--color-border-button, var(--gray-300, #D1D5DC));
  --photo-capture-hover: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
  --photo-capture-shadow: none;
  --photo-capture-trigger-background: var(--color-card-bg, var(--white, #FFF));
  --photo-capture-trigger-text: var(--color-text-subheading, var(--gray-900, #101828));
}

.profile-edit-dialog__photo-capture::part(panel) {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-edit-dialog__photo-capture::part(header) {
  justify-content: flex-end;
}

.profile-edit-dialog__photo-capture::part(heading),
.profile-edit-dialog__photo-capture::part(status-message),
.profile-edit-dialog__photo-capture::part(cancel-button) {
  display: none;
}

.profile-edit-dialog__photo-capture::part(close-button) {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--profile-edit-dialog-muted-text);
  font-size: 1.25rem;
}

.profile-edit-dialog__photo-capture::part(close-button):hover,
.profile-edit-dialog__photo-capture::part(close-button):focus-visible {
  background: transparent;
  color: var(--color-text-subheading, var(--gray-900, #101828));
}

.profile-edit-dialog__photo-capture::part(actions) {
  justify-content: center;
  gap: var(--spacing-2xs, 0.625rem);
}

.profile-edit-dialog__photo-capture::part(capture-button),
.profile-edit-dialog__photo-capture::part(retake-button),
.profile-edit-dialog__photo-capture::part(confirm-button) {
  min-height: auto;
  padding: 0.4125rem 0.6922rem 0.4375rem 0.8rem;
  border-radius: var(--border-radius-base, 0.3125rem);
  border: 0.8px solid var(--color-border-button, var(--gray-300, #D1D5DC));
  background: var(--color-card-bg, var(--white, #FFF));
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-xxs, 0.75rem);
  font-weight: var(--font-weight-xbold, 700);
  line-height: var(--line-height-base, 1.5);
}

.profile-edit-dialog__photo-capture::part(capture-button):hover,
.profile-edit-dialog__photo-capture::part(capture-button):focus-visible,
.profile-edit-dialog__photo-capture::part(retake-button):hover,
.profile-edit-dialog__photo-capture::part(retake-button):focus-visible,
.profile-edit-dialog__photo-capture::part(confirm-button):hover,
.profile-edit-dialog__photo-capture::part(confirm-button):focus-visible {
  background: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
  border-color: var(--color-border-button-hover, var(--gray-400, #99A1AF));
}

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

.profile-edit-dialog__image-button::part(button) {
  font-size: var(--font-size-xxs, 0.75rem);
  font-weight: var(--font-weight-xbold, 700);
  line-height: var(--line-height-base, 1.5);
  border-radius: var(--border-radius-base, 0.3125rem);
  transform: none;
}

.profile-edit-dialog__image-upload-button::part(button) {
  color: var(--color-text-subheading, var(--gray-900, #101828));
  border: 0.8px solid var(--color-border-button, var(--gray-300, #D1D5DC));
  background: var(--color-card-bg, var(--white, #FFF));
  padding: 0.4125rem 0.6922rem 0.4375rem 0.8rem;
}

.profile-edit-dialog__image-remove-button::part(button) {
  color: var(--red-600, #E7000B);
  padding: 0.4125rem 0.8148rem 0.4375rem 0.8625rem;
  border: 0.8px solid transparent;
  background: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
}

#profile-modal .modal .profile-edit-dialog__image-upload-button:hover::part(button),
#profile-modal .modal .profile-edit-dialog__image-upload-button:focus-within::part(button),
#profile-modal .modal .profile-edit-dialog__image-remove-button:hover::part(button),
#profile-modal .modal .profile-edit-dialog__image-remove-button:focus-within::part(button) {
  background: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6)) !important;
  border-color: var(--color-border-button-hover, var(--gray-400, #99A1AF)) !important;
}

.profile-edit-dialog__paste-button {
  position: absolute;
  white-space: nowrap;
  right: var(--spacing-2xs, 0.625rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--profile-edit-dialog-muted-text);
  min-width: 0;
  --button-height-md: 0;
  --button-padding-md: 0.25rem 0.375rem;
  --button-font-size-md: var(--font-size-xxs, 0.75rem);
  --button-font-weight: var(--font-weight-normal, 400);
  --button-background: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-base, 0.3125rem);
  --button-text: var(--profile-edit-dialog-muted-text);
  --button-box-shadow: none;
  --button-hover-background: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
  --button-hover-text: var(--profile-edit-dialog-quiet-text);
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  --button-icon-size-md: 0.813rem;
  --spacing-xxs: var(--spacing-xxs, 0.3125rem);
}

.profile-edit-dialog__paste-button:hover,
.profile-edit-dialog__paste-button:focus-within {
  color: var(--profile-edit-dialog-quiet-text);
}

.profile-edit-dialog__paste-icon {
  width: 0.694rem;
  height: 0.813rem;
  fill: currentColor;
}

solid-ui-button.profile-edit-dialog__drag-handle {
  min-width: 1.75rem;
  min-height: 1.75rem;
  --button-background: transparent;
  --button-height-md: 1.75rem;
  --button-padding-md: 0;
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-base, 0.3125rem);
  --button-icon-size-md: 0.813rem;
  --button-box-shadow: none;
  --button-hover-background: var(--profile-edit-dialog-action-hover-background);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

solid-ui-button.profile-edit-dialog__drag-handle::part(button) {
  min-width: 1.75rem;
  min-height: 1.75rem;
}

solid-ui-button.profile-edit-dialog__drag-handle:focus-visible::part(button) {
  outline: none;
}

solid-ui-button.profile-edit-dialog__drag-handle:active {
  cursor: grabbing;
}

.profile-edit-dialog__drag-handle-icon {
  display: inline-flex;
  width: 0.813rem;
  height: 0.813rem;
}

.profile-edit-dialog__drag-handle-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.profile-edit-dialog__row--drop-target {
  outline: 1px dashed var(--color-border-button-hover, var(--gray-400, #99A1AF));
  outline-offset: 2px;
}

.profile-edit-dialog__field input,
.profile-edit-dialog__field select,
.profile-edit-dialog__field-type input,
.profile-edit-dialog__field-type select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
  border-radius: var(--border-radius-base, 0.3125rem);
  border: 1px solid var(--color-border-button-hover, var(--gray-400, #99A1AF));
  background: var(--color-card-bg, var(--white, #FFF));
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  padding: var(--spacing-2xs, 0.625rem);
}

.profile-edit-dialog__field input[type='date'],
.profile-edit-dialog__field-type input[type='date'] {
  min-width: 0;
}

.profile-edit-dialog__field > solid-ui-combobox,
.profile-edit-dialog__field-type > solid-ui-combobox {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.profile-edit-dialog__field textarea,
.profile-edit-dialog__field-type textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--min-touch-target, 44px);
}

.profile-edit-dialog__textarea {
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-md, 500);
  line-height: var(--line-height-loose, 1.6);
  border-radius: var(--border-radius-base, 0.3125rem);
  border: var(--border-width-sm, 0.1rem) solid var(--color-border-button-hover, var(--gray-400, #99A1AF));
  background: var(--color-card-bg, var(--white, #FFF));
  min-height: 10rem !important;
  height: auto;
  resize: vertical;
}

.profile__edit-form--heading {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Section-specific edit dialog overrides */

.profile-edit-dialog__bio-field-container {
  display: flex;
  width: 100%;
  max-width: var(--profile-edit-dialog-row-max-width);
  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--language {
  margin-left: 0;
}

.profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog__actions--language {
  margin-left: 0;
}

.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 6rem;
  width: 6rem;
  max-width: 6rem;
}

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

.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(--color-border-button-hover, 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(--color-text-primary, var(--gray-700, #364153));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-md, 500);
}

.profile-edit-dialog__section--education .profile-edit-dialog__section-heading {
  margin: 0;
  color: var(--color-text-primary, var(--gray-700, #364153));
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-md, 500);
}

.profile-edit-dialog__row--resume-entry-header .profile-edit-dialog__delete-button,
solid-ui-button.profile-edit-dialog__delete-button.profile-edit-dialog__delete-button {
  min-height: var(--icon-sm, 1.8rem);
  min-width: var(--icon-sm, 1.8rem);
}

/* 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--heading .profile-edit-dialog__image-camera-capture-row {
  margin-bottom: calc(var(--spacing-lg, 1.25rem) / -2);
}

.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-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 > solid-ui-select,
.profile__edit-form--resume .profile-edit-dialog__field > solid-ui-combobox,
.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 > solid-ui-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 > solid-ui-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 > solid-ui-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 > solid-ui-select {
  flex: 1 1 0;
  min-width: 0;
}

.profile-edit-dialog__resume-date-select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.profile-edit-dialog__resume-date-select--disabled {
  pointer-events: none;
  opacity: var(--opacity-input-disabled, 0.75);
}

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

.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: var(--spacing-md, 1.25rem);
  border-bottom: 1px solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
}

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

.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__row--address-header {
  max-width: var(--profile-edit-dialog-row-max-width);
  align-items: flex-end;
}

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

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

.profile-edit-dialog__checkbox-input {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primary, #7C4DFF);
  cursor: var(--profile-interactive-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: var(--profile-edit-dialog-row-max-width);
}

.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-form--resume .profile-edit-dialog__field > solid-ui-combobox {
  min-height: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
}

.profile__edit-form--resume .profile-edit-dialog__field > solid-ui-combobox::part(input) {
  min-height: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
}

/* Dedicated hook for the social account type select in SocialEditDialog. */
.profile-edit-dialog__social-account-select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  contain: inline-size;
}

.profile-edit-dialog__resume-organization-type-select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.profile-edit-dialog__bio-field-container textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--min-touch-target, 44px);
}

.profile__edit-form--contact-info .profile-edit-dialog__section {
  --contact-info-dialog-contact-point-row-gap: var(--spacing-sm, 0.9375rem);
  --contact-info-dialog-contact-point-row-align: flex-start;
  --contact-info-dialog-contact-point-row-direction: row;
  --contact-info-dialog-contact-point-row-wrap: wrap;
  --contact-info-dialog-contact-point-field-flex: 1 1 auto;
  --contact-info-dialog-contact-point-type-width: 6.5rem;
  --contact-info-dialog-contact-point-type-max-width: none;
  --contact-info-dialog-contact-point-actions-flex: 0 1 auto;
  --contact-info-dialog-contact-point-actions-margin-left: auto;
  --contact-info-dialog-contact-point-actions-justify: flex-start;
  --contact-info-dialog-contact-point-select-font-size: inherit;
  --contact-info-dialog-contact-point-select-line-height: inherit;
  gap: 0;
}

.profile__edit-form--contact-info .profile-edit-dialog__section + .profile-edit-dialog__section {
  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
  padding-top: var(--spacing-xs, 0.75rem);
}

.profile__edit-form--contact-info .profile-edit-dialog__contact-section-header {
  padding: 0;
  gap: 1.875rem;
  margin-bottom: 0;
}

.profile__edit-form--contact-info .profile-edit-dialog__section fieldset {
  margin-top: 0.25rem;
  gap: var(--spacing-xs, 0.75rem);
}

.profile__edit-form--contact-info .profile-edit-dialog__section-heading {
  margin: 0;
  color: var(--gray-700, #364153);
  font-size: var(--font-size-md, 1rem); /* 16px */
  font-weight: var(--font-weight-md, 500);
  line-height: normal;
}

.profile__edit-form--contact-info .profile-edit-dialog__section-title-icon {
  display: inline-flex;
  width: 0.8333rem;
  height: 0.8333rem;
  flex: 0 0 0.8333rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.profile__edit-form--contact-info .profile-edit-dialog__section-title-icon svg {
  width: 100%;
  height: 100%;
}

.profile-edit-dialog__row--contact-point {
  max-width: 100%;
  width: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  flex-direction: var(--contact-info-dialog-contact-point-row-direction);
  align-items: var(--contact-info-dialog-contact-point-row-align);
  flex-wrap: var(--contact-info-dialog-contact-point-row-wrap);
  gap: var(--contact-info-dialog-contact-point-row-gap);
}

.profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point {
  margin-bottom: var(--spacing-xs, 0.75rem);
}

.profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point:last-child {
  margin-bottom: var(--spacing-sm, 0.9375rem);
}

.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type,
.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field > .label {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
  flex: var(--contact-info-dialog-contact-point-field-flex);
  min-width: 0;
}

.profile-edit-dialog__row--contact-point > label.profile-edit-dialog__field {
  display: block;
  width: auto;
  min-width: 0;
}

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

.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row {
  flex: 0 0 var(--contact-info-dialog-contact-point-type-width);
  width: var(--contact-info-dialog-contact-point-type-width);
  min-width: var(--contact-info-dialog-contact-point-type-width);
  max-width: var(--contact-info-dialog-contact-point-type-max-width);
}

.profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
  flex: 0 0 var(--contact-info-dialog-contact-point-type-width);
  width: var(--contact-info-dialog-contact-point-type-width);
  min-width: var(--contact-info-dialog-contact-point-type-width);
  max-width: var(--contact-info-dialog-contact-point-type-max-width);
}

.profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
  flex: var(--contact-info-dialog-contact-point-actions-flex);
  margin-left: var(--contact-info-dialog-contact-point-actions-margin-left);
  justify-content: var(--contact-info-dialog-contact-point-actions-justify);
}

#profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > solid-ui-select,
#profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow > solid-ui-select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.profile__edit-form--contact-info .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > select,
.profile__edit-form--contact-info .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row > solid-ui-select,
.profile__edit-form--contact-info .profile-edit-dialog__field-type.emailTypeRow > select,
.profile__edit-form--contact-info .profile-edit-dialog__field-type.emailTypeRow > solid-ui-select {
  font-size: var(--contact-info-dialog-contact-point-select-font-size);
  line-height: var(--contact-info-dialog-contact-point-select-line-height);
}

.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full {
  max-width: 100%;
  width: 100%;
  align-items: center;
}

.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full .profile-edit-dialog__actions {
  align-self: center;
}

.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full .profile-edit-dialog__delete-button {
  min-height: 1.75rem;
  min-width: 1.75rem;
}

.profile-edit-dialog__address-title {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-base, 1.5);
}

/* layout = mobile */
html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
  padding: 0;
}

html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading{
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-height-base, 1.5);
}

/* Media and container rules are needed so that the phone and email rows
stay as one row instead of wrapping */
@media (max-width: 768px) {
  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
  .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
    font-size: var(--font-size-md, 1rem);
    line-height: var(--line-height-base, 1.5);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
      minmax(var(--min-touch-target, 44px), auto);
    align-items: start;
    column-gap: var(--spacing-2xs, 0.625rem);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
    justify-self: stretch;
    width: var(--contact-info-dialog-contact-point-type-width);
    min-width: var(--contact-info-dialog-contact-point-type-width);
    max-width: var(--contact-info-dialog-contact-point-type-max-width);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: start;
    margin-left: 0;
    justify-self: end;
  }

  .profile__edit-form--contact-info .profile-edit-dialog__section {
    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
    --contact-info-dialog-contact-point-row-align: center;
    --contact-info-dialog-contact-point-row-direction: row;
    --contact-info-dialog-contact-point-row-wrap: nowrap;
    --contact-info-dialog-contact-point-field-flex: 1 1 0;
    --contact-info-dialog-contact-point-type-width: 5.5rem;
    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
    --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
    --contact-info-dialog-contact-point-actions-margin-left: 0;
    --contact-info-dialog-contact-point-actions-justify: flex-end;
    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
  }
}

@container profile-pane (max-width: 768px) {
  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
  .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
    font-size: var(--font-size-md, 1rem);
    line-height: var(--line-height-base, 1.5);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
      minmax(var(--min-touch-target, 44px), auto);
    align-items: start;
    column-gap: var(--spacing-2xs, 0.625rem);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.profile-edit-dialog__phone-type-row,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field-type.emailTypeRow {
    justify-self: stretch;
    width: var(--contact-info-dialog-contact-point-type-width);
    min-width: var(--contact-info-dialog-contact-point-type-width);
    max-width: var(--contact-info-dialog-contact-point-type-max-width);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions,
  .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: start;
    margin-left: 0;
    justify-self: end;
  }

  .profile__edit-form--contact-info .profile-edit-dialog__section {
    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
    --contact-info-dialog-contact-point-row-align: center;
    --contact-info-dialog-contact-point-row-direction: row;
    --contact-info-dialog-contact-point-row-wrap: nowrap;
    --contact-info-dialog-contact-point-field-flex: 1 1 0;
    --contact-info-dialog-contact-point-type-width: 5.5rem;
    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
    --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
    --contact-info-dialog-contact-point-actions-margin-left: 0;
    --contact-info-dialog-contact-point-actions-justify: flex-end;
    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
  }
}

@media (max-width: 576px) {
  #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
    padding: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
    width: 0.8333rem;
    height: 0.8333rem;
    flex-basis: 0.8333rem;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
    display: inline-flex;
    width: var(--font-size-xxs, 0.75rem);
    height: var(--font-size-xxs, 0.75rem);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon svg {
    width: 100%;
    height: 100%;
  }
}

@container profile-pane (max-width: 576px) {
  #profile-modal .modal .profile__edit-form--contact-info .profile__section-header.profile-edit-dialog__contact-section-header {
    padding: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
    width: 0.8333rem;
    height: 0.8333rem;
    flex-basis: 0.8333rem;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
    font-size: var(--font-size-sm, 0.875rem);
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
    display: inline-flex;
    width: var(--font-size-xxs, 0.75rem);
    height: var(--font-size-xxs, 0.75rem);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon svg {
    width: 100%;
    height: 100%;
  }
}

.profile__section[data-profile-section='contact-info'],
.profile__section--empty[data-profile-section='contact-info'] {
  --contact-info-icon-padding-inline: 0.575rem;
  --contact-info-icon-size: var(--icon-xxs, 1rem);
  --contact-info-contact-point-value-size: var(--font-size-sm, 0.875rem);
  --contact-info-contact-point-type-size: var(--font-size-xxs, 0.75rem);
}

/* Contact rows */
.contact-info__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--contact-info-icon-padding-inline, 0.575rem);
  flex-shrink: 0;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xs, 0.625rem);
  margin-inline-start: 0;
}

.contact-info__item-body {
  display: flex;
  flex-direction: column;
}

.contact-info__icon {
  width: var(--contact-info-icon-size, var(--icon-xxs, 1rem));
  height: var(--contact-info-icon-size, var(--icon-xxs, 1rem));
  flex-shrink: 0;
  stroke-width: 1.333px;
  stroke: var(--color-icon-muted, var(--slate-400, #90A1B9));
}

.contact-info__contact-point-value,
.contact-info__address {
  color: var(--color-text-strong-secondary, var(--slate-800, #1D293D));
  font-size: var(--contact-info-contact-point-value-size, var(--font-size-sm, 0.875rem));
  font-weight: var(--font-weight-bold, 600);
}

.contact-info__contact-point-value {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-info__contact-point-type {
  color: var(--color-text-detail, var(--slate-500, #62748E));
  font-size: var(--contact-info-contact-point-type-size, var(--font-size-xxs, 0.75rem));
  font-weight: var(--font-weight-md, 500);
}

/* Lists */
.contact-info__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  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);
}

/* Empty state */
.contact-info__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.contact-info__empty-icon svg path {
  stroke-width: 0.25rem;
  stroke: var(--color-border, #E5E7EB);
}

.contact-info__empty-message {
  text-align: center;
  font-size: var(--font-size-xs, 0.813rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-tight, 1.4);
}

.contact-info__empty-icon-wrapper {
  width: 3rem;
  flex: 1 0 0;
}

@media (max-width: 576px) {
  .profile__section[data-profile-section='contact-info'],
  .profile__section--empty[data-profile-section='contact-info'] {
    --contact-info-icon-padding-inline: 0;
    --contact-info-icon-size: 0.8295rem;
  }
}

@container profile-pane (max-width: 576px) {
  .profile__section[data-profile-section='contact-info'],
  .profile__section--empty[data-profile-section='contact-info'] {
    --contact-info-icon-padding-inline: 0;
    --contact-info-icon-size: 0.8295rem;
  }
}

/* Languages list */
.languages__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  gap: var(--spacing-sm, 0.9375rem);
  align-self: stretch;
}

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

/* Empty state */
.languages__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xs, 1.5rem);
  height: var(--icon-xs, 1.5rem);
  flex-shrink: 0;
}

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

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .languages__item-label {
  font-size: var(--font-size-sm, 0.875rem);
}

@media (max-width: 576px) {
  .languages__item-label {
    font-size: var(--font-size-sm, 0.875rem);
  }
}

@container profile-pane (max-width: 576px) {
  .languages__item-label {
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* Skills list */
.skills__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-base, 0.5rem);
}

.skills__item,
.skills__remove-button svg,
solid-ui-button.skills__remove-button {
  --skills-remove-icon-size: var(--icon-xxs, 1rem);
}

/* Skill chip */
.skills__item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--color-surface-chip, var(--gray-100, #F3F4F6));
  width: fit-content;
  max-width: 100%;
}

.skills__item[data-pending='true'] {
  opacity: 0.55;
}

.skills__item-label {
  display: inline;
  color: var(--color-text-strong, var(--slate-900, #0F172B));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-md, 500);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.skills__item-tail {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.skills__item-tail::before {
  content: '\00a0';
}

.skills__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Remove button */
solid-ui-button.skills__remove-button {
  width: var(--skills-remove-icon-size);
  height: var(--skills-remove-icon-size);
  line-height: 0;
  vertical-align: text-top;
  --button-height-sm: var(--skills-remove-icon-size);
  --button-padding-sm: 0;
  --button-icon-size-sm: var(--skills-remove-icon-size);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: currentColor;
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: currentColor;
}

solid-ui-button.skills__remove-button[data-loading='true'] {
  pointer-events: none;
}

.skills__remove-button svg {
  display: block;
  width: var(--skills-remove-icon-size);
  height: var(--skills-remove-icon-size);
}

.profile__section[data-profile-section='skills'] .profile-section-inline-error {
  margin-top: var(--spacing-sm, 0.938rem);
  padding: var(--spacing-xs, 0.75rem);
  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
  color: var(--dialog-error-text, var(--red-600, #B00020));
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__list {
  align-items: flex-start;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
  width: fit-content;
  max-width: 100%;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-label {
  font-size: var(--font-size-sm, 0.875rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-tail::before {
  content: none;
}

@media (max-width: 576px) {
  .skills__list {
    align-items: flex-start;
  }

  .skills__item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
    width: fit-content;
    max-width: 100%;
  }

  .skills__item-label {
    font-size: var(--font-size-sm, 0.875rem);
  }

  .skills__item-tail::before {
    content: none;
  }
}

@container profile-pane (max-width: 576px) {
  .skills__list {
    align-items: flex-start;
  }

  .skills__item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
    width: fit-content;
    max-width: 100%;
  }

  .skills__item-label {
    font-size: var(--font-size-sm, 0.875rem);
  }

  .skills__item-tail::before {
    content: none;
  }
}

/* Resume section styles. */

/* Section actions */
.resume__edit-button {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: var(--spacing-xxs, 0.3125rem);
  border: none;
  background: none;
  color: var(--color-primary, #7C4DFF);
  cursor: var(--profile-interactive-cursor, pointer);
  font-size: var(--font-size-sm, 0.875rem);
}

solid-ui-button.resume__edit-button {
  width: auto;
  min-width: 0;
  max-width: none;
  --button-height-sm: 0;
  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-regular, 400);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
}

.resume__edit-button:hover {
  text-decoration: underline;
}

solid-ui-button.resume__edit-button:hover::part(button),
solid-ui-button.resume__edit-button:focus-visible::part(button) {
  text-decoration: underline;
}

.resume-card {
  --resume-card-section-gap: var(--spacing-md, 1.25rem);
  --resume-card-item-gap: var(--spacing-xs, 0.75rem);
  --resume-card-header-gap: var(--spacing-sm, 0.75rem);
  --resume-card-column-gap: var(--spacing-md, 1.25rem);
  --resume-card-row-gap: var(--spacing-2xs, 0.625rem);
  --resume-card-title-color: var(--color-text-subheading, var(--gray-900, #101828));
  --resume-card-title-size: var(--font-size-lg, 1.125rem);
  --resume-card-title-weight: var(--font-weight-bold, 600);
  --resume-card-organization-color: var(--color-text-secondary, var(--gray-600, #4A5565));
  --resume-card-organization-size: var(--font-size-md, 1rem);
  --resume-card-organization-weight: var(--font-weight-md, 500);
  --resume-card-location-color: var(--color-text-secondary, var(--gray-600, #4A5565));
  --resume-card-location-size: var(--font-size-sm, 0.875rem);
  --resume-card-location-weight: var(--font-weight-normal, 400);
  --resume-card-period-color: var(--color-text-secondary, var(--gray-600, #4A5565));
  --resume-card-period-size: var(--font-size-sm, 0.875rem);
  --resume-card-period-weight: var(--font-weight-normal, 400);
  --resume-card-description-color: var(--color-text-primary, var(--gray-700, #364153));
  --resume-card-description-size: var(--font-size-sm, 0.875rem);
  --resume-card-description-weight: var(--font-weight-normal, 400);
  --resume-card-heading-color: var(--color-text-subheading, #101828);
  --resume-card-heading-border: var(--color-border-pale, #eee);
}

/* Section layout */
.resume-card__section {
  margin-bottom: var(--resume-card-section-gap);
}

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

.resume-card__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title period"
    "organization organization"
    "description description";
  column-gap: var(--resume-card-column-gap);
  row-gap: var(--resume-card-row-gap);
  align-items: start;
  margin: 0 0 var(--resume-card-item-gap) 0;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-base, 1.5);
  gap: 0;
}

.resume-card__item:last-child {
  margin-bottom: 0;
}

.resume-card__item-header {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: var(--resume-card-header-gap);
  min-width: 0;
}

.resume-card__item-header h3,
.resume-card__item-header h4,
.resume-card__item-header time {
  margin: 0;
}

.resume-card__item-header h3,
.resume-card__item-header h4 {
  min-width: 0;
  color: var(--resume-card-title-color);
  font-size: var(--resume-card-title-size);
  font-weight: var(--resume-card-title-weight);
  line-height: var(--line-height-tight, 1.4);
}

.resume-card__item-period {
  grid-area: period;
  justify-self: end;
  text-align: right;
  margin: 0;
  color: var(--resume-card-period-color);
  font-size: var(--resume-card-period-size);
  font-weight: var(--resume-card-period-weight);
  line-height: var(--line-height-tight, 1.4);
}

.resume-card__organization {
  grid-area: organization;
  margin: 0;
  line-height: var(--line-height-base, 1.5);
}

.resume-card__organization-name {
  color: var(--resume-card-organization-color);
  font-size: var(--resume-card-organization-size);
  font-weight: var(--resume-card-organization-weight);
}

.resume-card__organization-separator,
.resume-card__organization-location {
  color: var(--resume-card-location-color);
  font-size: var(--resume-card-location-size);
  font-weight: var(--resume-card-location-weight);
}

/* Description toggle */
.resume-card__description-wrap {
  grid-area: description;
  --resume-card-description-offset: var(--spacing-sm, 0.938rem);
  --resume-description-toggle-inline-offset: 0;
  --resume-description-toggle-line-top: calc(100% - 1.5em + 0.28em - 11px);
  --resume-description-toggle-line-translate-y: 7px;
  --resume-description-overflow-padding-inline-end: 4.5rem;
  margin: var(--resume-card-description-offset) 0 0;
  position: relative;
  isolation: isolate;
}

.resume-card__description-text {
  margin: 0;
  width: 100%;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--resume-card-description-color);
  font-size: var(--resume-card-description-size);
  font-weight: var(--resume-card-description-weight);
  line-height: var(--line-height-base, 1.5);
  overflow: hidden;
}

.resume-card__description-text--overflowing {
  padding-right: var(--resume-description-overflow-padding-inline-end);
}

.resume-card__description-text--expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  padding-right: 0;
  overflow: visible;
}

.resume-card__description-toggle,
solid-ui-button.resume-card__description-toggle {
  margin: 0;
  padding: 0;
  position: absolute;
  right: var(--resume-description-toggle-inline-offset);
  bottom: 0;
  background-color: var(--color-card-bg, #FFF);
  white-space: nowrap;
  z-index: 0;
}

.resume-card__description-toggle {
  border: 0;
  background: transparent;
  color: var(--color-primary, #7C4DFF);
  cursor: var(--profile-interactive-cursor, pointer);
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-base, 1.5);
  min-height: auto;
  min-width: auto;
}

solid-ui-button.resume-card__description-toggle {
  min-height: 0;
  min-width: 0;
  --button-height-sm: 0;
  --button-padding-sm: 0;
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-line-height: var(--line-height-base, 1.5);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
}

.resume-card__description-wrap .resume-card__description-text:not(.resume-card__description-text--expanded) + .resume-card__description-toggle,
.resume-card__description-wrap .resume-card__description-text:not(.resume-card__description-text--expanded) + solid-ui-button.resume-card__description-toggle {
  top: var(--resume-description-toggle-line-top);
  bottom: auto;
  transform: translateY(var(--resume-description-toggle-line-translate-y));
}

.resume-card__description-text--expanded + .resume-card__description-toggle,
.resume-card__description-text--expanded + solid-ui-button.resume-card__description-toggle {
  position: static;
  display: block;
  width: fit-content;
  margin-left: auto;
  top: auto;
  bottom: auto;
  transform: none;
}

.resume-card__description-text--expanded + solid-ui-button.resume-card__description-toggle::part(button) {
  position: static;
  display: inline-flex;
  top: auto;
  bottom: auto;
  transform: none;
}

.resume-card__skill,
.resume-card__language {
  text-align: left;
  margin: var(--resume-card-item-gap) 0;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-base, 1.5);
}

.resume-card__section > h3 {
  color: var(--resume-card-heading-color);
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: var(--font-weight-md, 500);
  line-height: var(--line-height-tight, 1.4);
  margin-bottom: var(--resume-card-item-gap);
  border-bottom: 1px solid var(--resume-card-heading-border);
  padding-bottom: var(--resume-card-item-gap);
}

/* Compact layout */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item {
  --resume-card-title-size: var(--font-size-lg, 1.125rem);
  --resume-card-organization-size: var(--font-size-md, 1rem);
  --resume-card-location-size: var(--font-size-sm, 0.875rem);
  --resume-card-period-size: var(--font-size-xxs, 0.75rem);
  --resume-card-description-size: var(--font-size-sm, 0.875rem);
  --resume-card-description-offset: 0rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "organization"
    "period"
    "description";
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item-header {
  align-items: flex-start;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item-period {
  justify-self: start;
  text-align: left;
}

@media (max-width: 576px) {
  .resume-card__item {
    --resume-card-title-size: var(--font-size-lg, 1.125rem);
    --resume-card-organization-size: var(--font-size-md, 1rem);
    --resume-card-location-size: var(--font-size-sm, 0.875rem);
    --resume-card-period-size: var(--font-size-xxs, 0.75rem);
    --resume-card-description-size: var(--font-size-sm, 0.875rem);
    --resume-card-description-offset: 0rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "organization"
      "period"
      "description";
  }

  .resume-card__item-header {
    align-items: flex-start;
  }

  .resume-card__item-period {
    justify-self: start;
    text-align: left;
  }
}

@container profile-pane (max-width: 576px) {
  .resume-card__item {
    --resume-card-title-size: var(--font-size-lg, 1.125rem);
    --resume-card-organization-size: var(--font-size-md, 1rem);
    --resume-card-location-size: var(--font-size-sm, 0.875rem);
    --resume-card-period-size: var(--font-size-xxs, 0.75rem);
    --resume-card-description-size: var(--font-size-sm, 0.875rem);
    --resume-card-description-offset: 0rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "organization"
      "period"
      "description";
  }

  .resume-card__item-header {
    align-items: flex-start;
  }

  .resume-card__item-period {
    justify-self: start;
    text-align: left;
  }
}

/* Projects section styles. */

.profile__section[data-profile-section='projects'],
.profile__section--empty[data-profile-section='projects'] {
  --project-card-rail-gap: var(--spacing-md, 1rem);
  --project-card-rail-wrap: nowrap;
  --project-card-rail-overflow-x: auto;
  --project-card-rail-scroll-snap-type: x proximity;
  --project-card-flex-basis: min(420px, 88vw);
  --project-card-flex: 0 0 var(--project-card-flex-basis);
  --project-card-max-width: none;
  --project-card-scrollbar-height: 0.5rem;
  --project-card-thumb-column-width: 88px;
  --project-card-thumb-size: 4.125rem;
  --project-card-follow-label-gap: var(--spacing-xxs, 0.3125rem);
  --project-card-wrapper-gap: var(--spacing-2xs, 0.625rem);
  --project-card-content-gap: var(--spacing-xxs, 0.3125rem);
  --project-card-heading-gap: 0.1875rem;
  --project-card-meta-margin-top: var(--spacing-xs, 0.75rem);
  --project-card-meta-font-size: 0.86rem;
  --project-card-footer-padding: var(--spacing-xs, 0.75rem);
  --project-card-more-button-gap: var(--spacing-xs, 0.375rem);
  --project-card-more-button-width: auto;
  --project-card-more-button-part-width: auto;
  --project-card-mobile-more-button-margin-top: var(--spacing-xs, 0.75rem);
  --project-card-more-button-margin-top: 0;
  --project-card-collapsed-extra-display: flex;
  --project-card-more-icon-transform: rotate(0deg);
}

/* Rail and cards */
.project-card__rail {
  display: flex;
  gap: var(--project-card-rail-gap);
  overflow-x: var(--project-card-rail-overflow-x, auto);
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: var(--project-card-rail-wrap, nowrap);
  scroll-snap-type: var(--project-card-rail-scroll-snap-type, x proximity);
}

solid-ui-button.project-card__follow-button {
  width: auto;
  min-width: 0;
  max-width: none;
  gap: var(--project-card-follow-label-gap);
  --button-border-width: var(--border-width-sm, 0.1rem);
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-md, 500);
  --button-padding-sm: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
  --button-border-radius: var(--border-radius-md, 0.5rem);
  --button-background: var(--color-card-bg, var(--white, #FFF));
  --button-text: var(--color-primary, #7C4DFF);
  --button-border: var(--color-primary, #7C4DFF);
  --button-hover-background: var(--color-primary, #7C4DFF);
  --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
  --button-hover-border: var(--color-primary, #7C4DFF);
}

.project-card__follow-label {
  display: inline-flex;
  align-items: center;
  gap: var(--project-card-follow-label-gap);
}

.project-card__follow-label--hover {
  display: none;
}

.project-card__follow-label--loading {
  display: none;
  align-items: center;
  gap: var(--project-card-follow-label-gap);
}

solid-ui-button.project-card__follow-button:hover .project-card__follow-label--default,
solid-ui-button.project-card__follow-button:focus-visible .project-card__follow-label--default,
solid-ui-button.project-card__follow-button:focus-within .project-card__follow-label--default {
  display: none;
}

solid-ui-button.project-card__follow-button:hover .project-card__follow-label--hover,
solid-ui-button.project-card__follow-button:focus-visible .project-card__follow-label--hover,
solid-ui-button.project-card__follow-button:focus-within .project-card__follow-label--hover {
  display: inline-flex;
}

solid-ui-button.project-card__follow-button[data-loading='true'] {
  pointer-events: none;
}

solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--default,
solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--hover {
  display: none;
}

solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--loading {
  display: inline-flex;
}

solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinner {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
  border-width: 0.125rem;
}

.project-card__rail::-webkit-scrollbar {
  height: var(--project-card-scrollbar-height);
}

.project-card__rail::-webkit-scrollbar-thumb {
  background: var(--color-icon-muted, #90A1B9);
  border-radius: 999px;
}

.project-card {
  display: flex;
  flex-direction: column;
  flex: var(--project-card-flex, 0 0 var(--project-card-flex-basis));
  width: 100%;
  max-width: var(--project-card-max-width, none);
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  border-radius: var(--border-radius-md, 0.5rem);
  border: var(--border-width-sm, 0.1rem) solid var(--color-border, var(--gray-200, #E5E7EB));
  padding: var(--spacing-md, 1.25rem);
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-sm, 0.938rem);
  flex-shrink: 0;
}

.project-card__link {
  display: block;
  width: 100%;
  align-self: stretch;
  color: inherit;
  text-decoration: none;
}

.project-card__link:hover .project-card__title,
.project-card__link:focus-visible .project-card__title {
  text-decoration: underline;
}

.project-card__wrapper {
  display: grid;
  grid-template-columns: var(--project-card-thumb-column-width) 1fr;
  gap: var(--project-card-wrapper-gap);
  width: 100%;
  align-items: start;
  border-radius: var(--border-radius-md, 0.5rem);
  border-bottom: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
}

.project-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--project-card-thumb-size);
  height: var(--project-card-thumb-size);
  overflow: hidden;
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--color-surface-placeholder, var(--gray-200, #E5E7EB));
  padding: 0.656rem var(--spacing-2xs, 0.625rem);
  aspect-ratio: 1/1;
}

.project-card__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card__thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
  color: var(--color-text-detail, var(--slate-500, #62748E));
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.project-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--project-card-content-gap);
  min-width: 0;
}

.project-card__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--project-card-heading-gap);
  min-width: 0;
}

.project-card__title,
.project-card__organization,
.project-card__category,
.project-card__meta,
.project-card__description {
  margin: 0;
}

.project-card__title {
  overflow: hidden;
  color: var(--color-text-subheading, var(--gray-900, #101828));
  text-overflow: ellipsis;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold, 600);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  align-self: stretch;
}

.project-card__organization {
  color: var(--color-text-primary, var(--gray-700, #364153));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-md, 500);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.35;
  align-self: stretch;
}

.project-card__category {
  font-size: var(--font-size-xxs, 0.75rem);
  font-weight: var(--font-weight-md, 500);
}

.project-card__category--project {
  color: var(--purple-500, #AD46FF);
}

.project-card__category--community {
  color: var(--yellow-700, #A65F00);
}

.project-card__category--unknown {
  color: var(--color-text-control, var(--slate-700, #314158));
}

.project-card__meta {
  margin-top: var(--project-card-meta-margin-top);
  overflow-wrap: anywhere;
  font-size: var(--project-card-meta-font-size, 0.86rem);
}

.project-card__footer {
  display: flex;
  justify-content: flex-start;
  align-self: stretch;
  margin-top: auto;
  padding: var(--spacing-sm, 0.938rem) 0 0;
}

.profile__section[data-profile-section='projects'] .profile-section-inline-error {
  margin-top: var(--spacing-sm, 0.938rem);
  padding: var(--spacing-xs, 0.75rem);
  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
  color: var(--dialog-error-text, var(--red-600, #B00020));
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Action buttons */

solid-ui-button.project-card__more-button {
  width: var(--project-card-more-button-width, auto);
  margin-top: var(--project-card-more-button-margin-top, 0);
  --button-height-sm: 0;
  --button-padding-x-sm: 0;
  --button-background: transparent;
  --button-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
}

.project-card__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: var(--project-card-more-icon-transform, rotate(0deg));
  transition: transform var(--animation-duration, 0.2s) ease;
}

solid-ui-button.project-card__more-button::part(button) {
  align-items: center;
  justify-content: center;
  width: var(--project-card-more-button-part-width, auto);
  gap: var(--project-card-more-button-gap, 0.375rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary, #7C4DFF);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 600);
  cursor: var(--profile-interactive-cursor, pointer);
}

/* Compact layout */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='projects'],
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='projects'] {
  --project-card-rail-wrap: wrap;
  --project-card-rail-overflow-x: visible;
  --project-card-rail-scroll-snap-type: none;
  --project-card-flex: 1 1 100%;
  --project-card-max-width: 100%;
  --project-card-more-button-width: 100%;
  --project-card-more-button-part-width: 100%;
  --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top, var(--spacing-xs, 0.75rem));
}

.profile-section-collapsible[data-mobile-expanded="false"] .project-card:nth-child(n + 3) {
  display: var(--project-card-collapsed-extra-display, flex);
}

solid-ui-button.project-card__more-button[data-mobile-expanded="true"] .project-card__more-icon {
  --project-card-more-icon-transform: rotate(180deg);
}

@media (max-width: 576px) {
  .profile__section[data-profile-section='projects'],
  .profile__section--empty[data-profile-section='projects'] {
    --project-card-rail-wrap: wrap;
    --project-card-rail-overflow-x: visible;
    --project-card-rail-scroll-snap-type: none;
    --project-card-flex: 1 1 100%;
    --project-card-max-width: 100%;
    --project-card-more-button-width: 100%;
    --project-card-more-button-part-width: 100%;
    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top, var(--spacing-xs, 0.75rem));
    --project-card-collapsed-extra-display: none;
  }
}

@container profile-pane (max-width: 576px) {
  .profile__section[data-profile-section='projects'],
  .profile__section--empty[data-profile-section='projects'] {
    --project-card-rail-wrap: wrap;
    --project-card-rail-overflow-x: visible;
    --project-card-rail-scroll-snap-type: none;
    --project-card-flex: 1 1 100%;
    --project-card-max-width: 100%;
    --project-card-more-button-width: 100%;
    --project-card-more-button-part-width: 100%;
    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top, var(--spacing-xs, 0.75rem));
    --project-card-collapsed-extra-display: none;
  }
}
.profile__avatar {
  flex: 0 0 auto;
  grid-area: avatar;
}

/* Header grid */
.profile__heading-top {
  --profile-heading-header-bar-gap: 0.125rem;
  --profile-heading-desktop-details-offset: var(--spacing-lg, 1.5625rem);
  --profile-heading-desktop-detail-row-gap: var(--spacing-xxs, 0.3125rem);
  --profile-heading-identity-inline-gap: 0.4375rem;
  --profile-heading-name-offset-x: -4px;
  --profile-heading-detail-column-gap: 2rem;
  --profile-heading-detail-grid-column-gap: clamp(0.75rem, 2vw, 1.5rem);
  --profile-heading-detail-grid-max-width: 34rem;
  --profile-heading-detail-icon-size: var(--icon-xxs, 1rem);
  --profile-heading-prefix-icon-gap: 0.125rem;
  --profile-heading-action-item-flex: 0 0 auto;
  --profile-heading-action-label-font-size: inherit;
  --profile-heading-action-label-white-space: normal;
  --profile-heading-action-contact-icon-size: var(--icon-xxs, 1rem);
  --profile-heading-action-contact-icon-gap: var(--spacing-xxs, 0.3125rem);
  --profile-heading-action-full-label-display: inline;
  --profile-heading-action-short-label-display: none;
  --profile-heading-medium-column-gap: var(--spacing-sm, 0.75rem);
  --profile-heading-hero-size: 8.75rem;
  --profile-heading-hero-alt-padding-inline: 2.275rem;
  --profile-heading-medium-hero-size: 6.5rem;
  --profile-heading-medium-hero-alt-padding-inline: 1.6875rem;
  --profile-heading-medium-action-gap: 0.25rem;
  --profile-heading-medium-button-padding: 0.3125rem 0.5625rem;
  --profile-heading-medium-button-padding-x: 0.5625rem;
  --profile-heading-medium-button-font-size: var(--font-size-xs, 0.8125rem);
  --profile-heading-medium-contact-icon-size: 0.6875rem;
  --profile-heading-medium-contact-icon-gap: 0.25rem;
  --profile-heading-medium-actions-max-inline-size: 10.5rem;
  --profile-heading-narrow-column-gap: 0.5rem;
  --profile-heading-narrow-action-gap: 0.25rem;
  --profile-heading-narrow-actions-justify-self: center;
  --profile-heading-narrow-actions-margin-left: auto;
  --profile-heading-narrow-actions-margin-right: auto;
  --profile-heading-narrow-actions-justify-content: center;
  --profile-heading-compact-column-gap: 0.5rem;
  --profile-heading-compact-row-gap: var(--spacing-sm, 0.75rem);
  --profile-heading-compact-action-gap: 0.25rem;
  --profile-heading-compact-actions-justify-self: start;
  --profile-heading-compact-actions-margin-left: 0;
  --profile-heading-compact-actions-margin-right: auto;
  --profile-heading-compact-actions-justify-content: flex-start;
  --profile-heading-secondary-edit-justify-self: end;
  --profile-heading-secondary-edit-align-self: flex-start;
  --profile-heading-secondary-edit-margin-left: auto;
  --profile-heading-secondary-edit-margin-right: 0;
  --profile-heading-secondary-edit-justify-content: flex-end;
  --profile-heading-compact-button-padding: 0.25rem 0.3125rem;
  --profile-heading-compact-button-padding-x: 0.3125rem;
  --profile-heading-compact-button-font-size: var(--font-size-xxs, 0.75rem);
  --profile-heading-compact-contact-icon-size: 0.625rem;
  --profile-heading-compact-contact-icon-gap: 0.1875rem;
  --profile-heading-compact-button-hover-background: var(--color-primary, #7C4DFF);
  --profile-heading-compact-button-hover-border: var(--color-primary, #7C4DFF);
  --profile-heading-compact-button-hover-text: var(--color-text-on-action, var(--white, #FFF));
  --profile-heading-compact-detail-column-gap: 0.25rem;
  --profile-heading-compact-detail-size: var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem));
  --profile-heading-compact-details-gap: var(--spacing-xs, 0.5rem);
  --profile-heading-compact-identity-gap: 0.125rem;
  --profile-heading-compact-hero-icon-size: 3rem;
  --profile-heading-compact-image-size: var(--profile-mobile-header-image-size, 4.375rem);
  --profile-heading-compact-name-size: var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem));
  --profile-heading-compact-name-line-height: 1.15;
  --profile-heading-compact-pronouns-size: var(--profile-mobile-header-pronouns-size, var(--font-size-2xs, 0.6875rem));
  --profile-heading-compact-pronouns-line-height: 1.1;
  --profile-heading-compact-role-size: var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "avatar info actions edit"
    "avatar details details details";
  column-gap: var(--spacing-md, 1.25rem);
  row-gap: var(--profile-heading-desktop-details-offset, var(--spacing-lg, 1.5625rem));
  align-items: start;
  width: 100%;
}

.profile__name {
  display: block;
  color: var(--color-text-heading, #000);
  font-size: var(--font-size-xxl, 1.75rem); /* 28px */
  font-weight: var(--font-weight-bold, 600);
  margin: 0;
  padding: 0;
  text-indent: 0;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
  transform: translateX(var(--profile-heading-name-offset-x, -4px));
}

.profile__info {
  display: flex;
  flex-direction: column;
  grid-area: info;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
}

.profile__details {
  grid-area: details;
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  display: flex;
  width: 100%;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--profile-heading-desktop-detail-row-gap, var(--spacing-xxs, 0.3125rem)) var(--profile-heading-detail-column-gap, 2rem);
}

.profile__info > .profile__header-bar {
  margin-left: 0;
  padding-left: 0;
  align-self: stretch;
}

.profile__header-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--profile-heading-header-bar-gap, 0.125rem);
  width: 100%;
  margin: 0;
  padding: 0;
}

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

.profile__heading-actions {
  grid-area: actions;
  margin-left: auto;
  margin-bottom: 0;
  align-self: flex-start;
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs, 0.5rem);
  flex-wrap: wrap;
}

.profile__heading-actions .profile__btn-friends-label,
.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-label {
  font-size: var(--profile-heading-action-label-font-size, inherit);
  white-space: var(--profile-heading-action-label-white-space, normal);
}

.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon,
.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon svg {
  width: var(--profile-heading-action-contact-icon-size, var(--icon-xxs, 1rem));
  height: var(--profile-heading-action-contact-icon-size, var(--icon-xxs, 1rem));
}

.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon {
  margin-right: var(--profile-heading-action-contact-icon-gap, var(--spacing-xxs, 0.3125rem));
}

.profile__heading-actions solid-ui-button.profile__btn-friends[data-friends-short-label='true'] .profile__btn-friends-label--full {
  display: var(--profile-heading-action-full-label-display, inline);
}

.profile__heading-actions solid-ui-button.profile__btn-friends[data-friends-short-label='true'] .profile__btn-friends-label--short {
  display: var(--profile-heading-action-short-label-display, none);
}

.profile__heading-edit-action {
  grid-area: edit;
  margin-left: auto;
  margin-right: var(--profile-heading-secondary-edit-margin-right, 0);
  margin-bottom: 0;
  align-self: flex-start;
  justify-self: end;
  display: flex;
  justify-content: var(--profile-heading-secondary-edit-justify-content, flex-end);
  align-items: flex-start;
  padding: 0;
}

.profile__heading-actions > .profile-friends-button__section,
.profile__heading-actions > #add-to-contacts-button-container {
  width: auto;
  min-width: 0;
  flex: var(--profile-heading-action-item-flex, 0 0 auto);
}

.profile__heading-actions > #add-to-contacts-button-container {
  display: none !important;
}

.profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
.profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
  width: auto;
  max-width: 100%;
}

.profile__heading-action-button {
  position: static;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
  --button-padding-sm: 0;
}

.profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button) {
  padding: 0;
}

/* Identity details */
.profile__identity {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--profile-heading-identity-inline-gap, 0.4375rem);
  justify-content: flex-start;
  width: 100%;
  flex-wrap: nowrap;
}

.profile__pronouns {
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.2;
}

.profile__role-org {
  margin: 0;
  width: 100%;
  white-space: normal;
  color: var(--color-text-subheading, #101828);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-md, 500);
  line-height: 1.25;
  text-align: left;
}

.profile__meta-row,
.profile__contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: flex-start;
  column-gap: var(--profile-heading-detail-grid-column-gap, clamp(0.75rem, 2vw, 1.5rem));
  row-gap: var(--spacing-xs, 0.5rem);
  align-items: start;
  margin: 0;
  padding: 0;
  width: min(100%, var(--profile-heading-detail-grid-max-width, 34rem));
  max-width: 100%;
}

.profile__meta-row .profile__item,
.profile__contact-row .profile__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs, 0.625rem);
  min-width: 0;
}

.profile__meta-row .profile__value,
.profile__contact-row .profile__value,
.profile__meta-row .profile__value-text,
.profile__contact-row .profile__value-text {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile__meta-row .profile__value,
.profile__contact-row .profile__value {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxs, 0.3125rem);
}

.profile__prefix-icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--profile-heading-prefix-icon-gap, 0.125rem);
}

.profile__detail-icon {
  display: block;
  width: var(--profile-heading-detail-icon-size, var(--icon-xxs, 1rem));
  height: var(--profile-heading-detail-icon-size, var(--icon-xxs, 1rem));
}

.profile__hero,
.profile__hero-alt {
  width: var(--profile-heading-hero-size, 8.75rem);
  height: var(--profile-heading-hero-size, 8.75rem);
  border-radius: var(--border-radius-full, 0.625rem); /* 10px */
}

.profile__image-frame:not(.profile__image-frame--fallback) .profile__hero-alt {
  display: none;
}

.profile__image-frame--fallback .profile__hero {
  display: none;
}

/* Profile image */
.profile__hero {
  border: var(--border-width-sm, 0.1rem) solid var(--color-primary, #7C4DFF);
  background: var(--color-surface-placeholder, var(--gray-300, #D1D5DC)) 50% / cover no-repeat;
  background-position: 50%;
  object-fit: cover;
  object-position: center;
}

.profile__hero-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--profile-heading-hero-alt-padding-inline, 2.275rem);
  border: var(--border-width-sm, 0.1rem) dashed var(--color-border-lighter, var(--slate-200, #E2E8F0));
  background: var(--color-surface-overlay-header, #F8FAFC);
  box-sizing: border-box;
}

/* Counteracts mashlib alignment so the placeholder icon stays centered. */
.profile__hero-alt .profile__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.profile__hero-alt .profile__hero-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive: medium widths */
@media (max-width: 1200px) {
  .profile__heading-top {
    column-gap: var(--profile-heading-medium-column-gap, var(--spacing-sm, 0.75rem));
  }

  .profile__hero,
  .profile__hero-alt {
    width: var(--profile-heading-medium-hero-size, 6.5rem);
    height: var(--profile-heading-medium-hero-size, 6.5rem);
  }

  .profile__hero-alt {
    padding: 0 var(--profile-heading-medium-hero-alt-padding-inline, 1.6875rem);
  }

  .profile__heading-actions {
    --profile-heading-action-item-flex: 0 1 auto;
    --profile-heading-action-label-font-size: var(--profile-heading-medium-button-font-size);
    --profile-heading-action-contact-icon-size: var(--profile-heading-medium-contact-icon-size);
    --profile-heading-action-contact-icon-gap: var(--profile-heading-medium-contact-icon-gap);
    justify-self: end;
    margin-bottom: 0;
    max-inline-size: var(--profile-heading-medium-actions-max-inline-size, 10.5rem);
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-end;
    gap: var(--profile-heading-medium-action-gap, 0.25rem);
  }
  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    --button-padding-sm: var(--profile-heading-medium-button-padding, 0.3125rem 0.5625rem);
    --button-padding-x-sm: var(--profile-heading-medium-button-padding-x, 0.5625rem);
    --button-font-size-sm: var(--profile-heading-medium-button-font-size, var(--font-size-xs, 0.8125rem));
  }

}

@container profile-pane (max-width: 1200px) {
  .profile__heading-top {
    column-gap: var(--profile-heading-medium-column-gap, var(--spacing-sm, 0.75rem));
  }

  .profile__hero,
  .profile__hero-alt {
    width: var(--profile-heading-medium-hero-size, 6.5rem);
    height: var(--profile-heading-medium-hero-size, 6.5rem);
  }

  .profile__hero-alt {
    padding: 0 var(--profile-heading-medium-hero-alt-padding-inline, 1.6875rem);
  }

  .profile__heading-actions {
    --profile-heading-action-item-flex: 0 1 auto;
    --profile-heading-action-label-font-size: var(--profile-heading-medium-button-font-size);
    --profile-heading-action-contact-icon-size: var(--profile-heading-medium-contact-icon-size);
    --profile-heading-action-contact-icon-gap: var(--profile-heading-medium-contact-icon-gap);
    justify-self: end;
    margin-bottom: 0;
    max-inline-size: var(--profile-heading-medium-actions-max-inline-size, 10.5rem);
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-end;
    gap: var(--profile-heading-medium-action-gap, 0.25rem);
  }
  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    --button-padding-sm: var(--profile-heading-medium-button-padding, 0.3125rem 0.5625rem);
    --button-padding-x-sm: var(--profile-heading-medium-button-padding-x, 0.5625rem);
    --button-font-size-sm: var(--profile-heading-medium-button-font-size, var(--font-size-xs, 0.8125rem));
  }

}

@media (max-width: 768px) {
  .profile__heading-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar info edit"
      "details details details"
      "actions actions actions";
    column-gap: var(--profile-heading-narrow-column-gap, 0.5rem);
    row-gap: var(--spacing-sm, 0.75rem);
  }

  .profile__heading-actions {
    justify-self: var(--profile-heading-narrow-actions-justify-self, center);
    margin-left: var(--profile-heading-narrow-actions-margin-left, auto);
    margin-right: var(--profile-heading-narrow-actions-margin-right, auto);
    max-inline-size: none;
    justify-content: var(--profile-heading-narrow-actions-justify-content, center);
    align-items: center;
    align-content: center;
    gap: var(--profile-heading-narrow-action-gap, 0.25rem);
    flex-wrap: nowrap;
  }

  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-width-sm: var(--min-touch-target, 44px);
    --button-height-sm: var(--min-touch-target, 44px);
    --button-background: transparent;
    --button-border-width: 0;
    --button-border: transparent;
    --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
    --button-hover-border: transparent;
    --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
  }

  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
    background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
    text-decoration: none;
  }

}

@container profile-pane (max-width: 768px) {
  .profile__heading-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar info edit"
      "details details details"
      "actions actions actions";
    column-gap: var(--profile-heading-narrow-column-gap, 0.5rem);
    row-gap: var(--spacing-sm, 0.75rem);
  }

  .profile__heading-actions {
    justify-self: var(--profile-heading-narrow-actions-justify-self, center);
    margin-left: var(--profile-heading-narrow-actions-margin-left, auto);
    margin-right: var(--profile-heading-narrow-actions-margin-right, auto);
    max-inline-size: none;
    justify-content: var(--profile-heading-narrow-actions-justify-content, center);
    align-items: center;
    align-content: center;
    gap: var(--profile-heading-narrow-action-gap, 0.25rem);
    flex-wrap: nowrap;
  }

  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button {
    min-width: var(--min-touch-target, 44px);
    min-height: var(--min-touch-target, 44px);
    --button-width-sm: var(--min-touch-target, 44px);
    --button-height-sm: var(--min-touch-target, 44px);
    --button-background: transparent;
    --button-border-width: 0;
    --button-border: transparent;
    --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
    --button-hover-border: transparent;
    --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
  }

  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
    background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
    text-decoration: none;
  }

}
/* Responsive: compact widths */
/* layout = mobile */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-top {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar info edit"
    "details details details"
    "actions actions actions";
  column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
  row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__info {
  grid-column: 2 / -1;
  align-self: stretch;
  justify-content: flex-end;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__avatar {
  align-self: flex-end;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions {
  --profile-heading-action-item-flex: 0 1 auto;
  --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
  --profile-heading-action-label-white-space: nowrap;
  --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
  --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
  --profile-heading-action-full-label-display: none;
  --profile-heading-action-short-label-display: inline;
  justify-self: var(--profile-heading-compact-actions-justify-self, start);
  margin-left: var(--profile-heading-compact-actions-margin-left, 0);
  margin-right: var(--profile-heading-compact-actions-margin-right, auto);
  max-inline-size: none;
  justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
  align-items: center;
  align-content: center;
  gap: var(--profile-heading-compact-action-gap, 0.25rem);
  flex-wrap: nowrap;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button {
  min-width: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  --button-width-sm: var(--min-touch-target, 44px);
  --button-height-sm: var(--min-touch-target, 44px);
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
  --button-hover-border: transparent;
  --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
  background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
  text-decoration: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
  min-width: 0;
  inline-size: auto;
  min-height: var(--button-height-sm, 1.75rem);
  --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
  --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
  --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
  --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
  --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
  --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
  --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__name {
  display: inline;
  font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
  line-height: var(--profile-heading-compact-name-line-height, 1.15);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__identity {
  display: flow-root;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__identity::before {
  content: '';
  float: right;
  width: calc(var(--profile-heading-mobile-edit-rail-width, 2.75rem) + var(--profile-heading-mobile-edit-rail-gap, var(--spacing-xxs, 0.3125rem)));
  height: var(--profile-heading-mobile-identity-rail-height, 2rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__pronouns {
  font-size: var(--profile-heading-compact-pronouns-size, var(--profile-mobile-header-pronouns-size, 0.6875rem));
  line-height: var(--profile-heading-compact-pronouns-line-height, 1.1);
  margin-left: var(--profile-heading-compact-identity-gap, 0.125rem);
  white-space: nowrap;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__role-org {
  font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-alt {
  width: var(--profile-heading-compact-image-size, var(--profile-mobile-header-image-size, 4.375rem));
  height: var(--profile-heading-compact-image-size, var(--profile-mobile-header-image-size, 4.375rem));
  aspect-ratio: 1 / 1;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-alt {
  padding: 0;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__image-frame--fallback .profile__hero-alt {
  display: flex;
  align-items: center;
  justify-content: center;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-icon {
  display: block;
  margin: 0 auto;
  width: var(--profile-heading-compact-hero-icon-size, 3rem);
  height: var(--profile-heading-compact-hero-icon-size, 3rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__details {
  font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
  gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__meta-row,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__contact-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
}

@media (max-width: 576px) {
  .profile__heading-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar info edit"
      "details details details"
      "actions actions actions";
    column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
    row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
  }

  .profile__info {
    grid-column: 2 / -1;
    align-self: stretch;
    justify-content: flex-end;
  }

  .profile__avatar {
    align-self: flex-end;
  }

  .profile__heading-actions {
    --profile-heading-action-item-flex: 0 1 auto;
    --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
    --profile-heading-action-label-white-space: nowrap;
    --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
    --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
    --profile-heading-action-full-label-display: none;
    --profile-heading-action-short-label-display: inline;
    justify-self: var(--profile-heading-compact-actions-justify-self, start);
    margin-left: var(--profile-heading-compact-actions-margin-left, 0);
    margin-right: var(--profile-heading-compact-actions-margin-right, auto);
    max-inline-size: none;
    justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
    align-items: center;
    align-content: center;
    gap: var(--profile-heading-compact-action-gap, 0.25rem);
    flex-wrap: nowrap;
  }

  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    min-width: 0;
    inline-size: auto;
    min-height: var(--button-height-sm, 1.75rem);
    --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
    --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
    --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
    --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
    --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
    --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  }

  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
    --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
    --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  }

  .profile__name {
    display: inline;
    font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
    line-height: var(--profile-heading-compact-name-line-height, 1.15);
  }

  .profile__identity {
    display: flow-root;
  }

  .profile__role-org {
    font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
  }

  .profile__hero-alt {
    padding: 0;
  }

  .profile__image-frame--fallback .profile__hero-alt {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile__hero-icon {
    display: block;
    margin: 0 auto;
    width: var(--profile-heading-compact-hero-icon-size, 3rem);
    height: var(--profile-heading-compact-hero-icon-size, 3rem);
  }

  .profile__details {
    font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
    gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
  }

  .profile__meta-row,
  .profile__contact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
  }
}

@container profile-pane (max-width: 576px) {
  .profile__heading-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar info edit"
      "details details details"
      "actions actions actions";
    column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
    row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
  }

  .profile__info {
    grid-column: 2 / -1;
    align-self: stretch;
    justify-content: flex-end;
  }

  .profile__avatar {
    align-self: flex-end;
  }

  .profile__heading-actions {
    --profile-heading-action-item-flex: 0 1 auto;
    --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
    --profile-heading-action-label-white-space: nowrap;
    --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
    --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
    --profile-heading-action-full-label-display: none;
    --profile-heading-action-short-label-display: inline;
    justify-self: var(--profile-heading-compact-actions-justify-self, start);
    margin-left: var(--profile-heading-compact-actions-margin-left, 0);
    margin-right: var(--profile-heading-compact-actions-margin-right, auto);
    max-inline-size: none;
    justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
    align-items: center;
    align-content: center;
    gap: var(--profile-heading-compact-action-gap, 0.25rem);
    flex-wrap: nowrap;
  }

  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    min-width: 0;
    inline-size: auto;
    min-height: var(--button-height-sm, 1.75rem);
    --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
    --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
    --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
    --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
    --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
    --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  }

  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
    --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
    --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
    --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  }

  .profile__name {
    display: inline;
    font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
    line-height: var(--profile-heading-compact-name-line-height, 1.15);
  }

  .profile__identity {
    display: flow-root;
  }

  .profile__role-org {
    font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
  }

  .profile__hero-alt {
    padding: 0;
  }

  .profile__image-frame--fallback .profile__hero-alt {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile__hero-icon {
    display: block;
    margin: 0 auto;
    width: var(--profile-heading-compact-hero-icon-size, 3rem);
    height: var(--profile-heading-compact-hero-icon-size, 3rem);
  }

  .profile__details {
    font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
    gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
  }

  .profile__meta-row,
  .profile__contact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
  }
}


.profile-friends-button__section {
  --profile-friends-button-color: var(--color-primary, #7C4DFF);
  width: 100%;
  min-width: 0;
  display: grid;
}

.profile-friends-button__section[hidden] {
  display: none !important;
}

.profile-friends-button__section solid-ui-button.profile__btn-friends {
  width: 100%;
  min-width: 0;
  --button-hover-background: var(--profile-friends-button-color);
  --button-hover-border: var(--profile-friends-button-color);
  --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
}

.profile-friends-button__section solid-ui-button.profile__btn-friends[disabled],
.profile-friends-button__section solid-ui-button.profile__btn-friends[aria-disabled="true"] {
  pointer-events: none;
  --button-hover-background: var(--button-background, transparent);
  --button-hover-border: var(--button-border, var(--profile-friends-button-color));
  --button-hover-text: var(--button-text, var(--profile-friends-button-color));
}

.profile-friends-button__section .profile__btn-friends-label {
  color: var(--profile-friends-button-color);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-md, 500);
  line-height: 1;
  letter-spacing: -0.01em;
}

.profile-friends-button__section solid-ui-button.profile__btn-friends:not([disabled]):hover .profile__btn-friends-label,
.profile-friends-button__section solid-ui-button.profile__btn-friends:not([disabled]):focus-visible .profile__btn-friends-label,
.profile-friends-button__section solid-ui-button.profile__btn-friends:not([aria-disabled="true"]):hover .profile__btn-friends-label,
.profile-friends-button__section solid-ui-button.profile__btn-friends:not([aria-disabled="true"]):focus-visible .profile__btn-friends-label {
  color: var(--color-text-on-action, var(--white, #FFF));
}

.profile-friends-button__section .profile__btn-friends-label--short {
  display: none;
}

.profile-friends-button__section .profile__btn-friends-label--short::before {
  content: attr(data-short-label-text);
}

.profile-friends-button__container input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* Launch button */
.profile-contacts-button__section {
  width: 100%;
  min-width: 0;
  display: grid;
}

#add-to-contacts-button-container {
  position: relative;
  overflow: visible;
}

#add-to-contacts-button-container solid-ui-button.profile__btn-contacts {
  --profile-contacts-button-border-default: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
  --profile-contacts-button-background-default: transparent;
  --profile-contacts-button-text-default: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
  --profile-contacts-button-border-hover: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  --profile-contacts-button-background-hover: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  --profile-contacts-button-text-hover: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  --button-padding-sm: var(--spacing-sm, 0.9375rem) var(--spacing-md, 1.25rem);
  --button-font-size-sm: var(--font-size-md, 1rem);
  --button-font-weight: var(--font-weight-normal, normal);
  --button-border-radius: var(--border-radius-base);
  --button-transition: all 0.3s ease-in-out;
  --button-focus-outline: var(--focus-indicator-width) solid var(--color-primary);
  --button-focus-outline-offset: var(--outline-offset-sm);
  --button-focus-box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-focus-gap, var(--white, #FFF)), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha, rgba(124, 77, 255, 0.2)));
  --button-border: var(--profile-contacts-button-border-default);
  --button-background: var(--profile-contacts-button-background-default);
  --button-text: var(--profile-contacts-button-text-default);
  --button-hover-border: var(--profile-contacts-button-border-hover);
  --button-hover-background: var(--profile-contacts-button-background-hover);
  --button-hover-text: var(--profile-contacts-button-text-hover);
  color: var(--button-text);
}

html[data-theme="dark"] #add-to-contacts-button-container solid-ui-button.profile__btn-contacts {
  --profile-contacts-button-border-default: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
}

#add-to-contacts-button-container .profile__btn-contacts-label {
  color: currentColor;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

#add-to-contacts-button-container .profile__btn-contacts-icon {
  width: var(--icon-xxxs, 0.75rem);
  height: var(--icon-xxxs, 0.75rem);
  margin-right: var(--spacing-xxs, 0.3125rem);
  flex-shrink: 0;
}

#add-to-contacts-button-container .profile__btn-contacts-icon svg {
  width: var(--icon-xxxs, 0.75rem);
  height: var(--icon-xxxs, 0.75rem);
  display: block;
}

#add-to-contacts-button-container .profile__btn-contacts-icon path {
  fill: currentColor;
}

#add-to-contacts-button-container solid-ui-button.profile__btn-contacts:hover .profile__btn-contacts-label,
#add-to-contacts-button-container solid-ui-button.profile__btn-contacts:focus-visible .profile__btn-contacts-label {
  color: currentColor;
}

#add-to-contacts-button-container solid-ui-button.profile__btn-contacts:hover .profile__btn-contacts-icon path,
#add-to-contacts-button-container solid-ui-button.profile__btn-contacts:focus-visible .profile__btn-contacts-icon path {
  fill: currentColor;
}

#add-to-contacts-button-container solid-ui-button.profile__btn-contacts[disabled],
#add-to-contacts-button-container solid-ui-button.profile__btn-contacts[aria-disabled="true"] {
  --profile-contacts-button-border-default: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
  --profile-contacts-button-background-default: transparent;
  --profile-contacts-button-text-default: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
  --profile-contacts-button-border-hover: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  --profile-contacts-button-background-hover: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  --profile-contacts-button-text-hover: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  opacity: 1;
}

/* Main dialog shell */
.contacts-dialog__content {
  --contacts-dialog-action-width: 10.8rem;
  --contacts-dialog-list-width: 20rem;
  --contacts-dialog-panel-width: 20.75rem;
  --contacts-dialog-mobile-popup-max-width: calc(92vw - 5px);
  --contacts-dialog-panel-border: var(--color-border-lighter, var(--slate-200, #E2E8F0));
  --contacts-dialog-panel-background: var(--color-background, #F8F9FB);
  --contacts-dialog-panel-header-background: var(--color-surface-overlay-header, var(--slate-50, #F8FAFC));
  --contacts-dialog-panel-body-background: var(--color-card-bg, #FFF);
  --contacts-dialog-panel-padding-inline: calc(var(--spacing-lg, 1.5625rem) + var(--spacing-xxs, 0.3125rem));
  --contacts-dialog-inner-footer-padding: var(--spacing-sm, 0.9375rem) var(--spacing-lg, 1.5625rem);
  --contacts-dialog-inner-footer-padding-mobile: var(--spacing-xs, 0.75rem) var(--spacing-sm, 0.9375rem);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  min-width: 0;
}

.contacts-dialog__frame {
  min-width: 0;
  background: transparent;
  border-radius: 0;
  max-height: none;
  overflow: visible;
}

.contacts-dialog__main {
  width: 100%;
  min-width: 0;
  padding: var(--spacing-sm, 0.938rem);
  box-sizing: border-box;
}

.contacts-dialog__creation {
  width: 100%;
  min-width: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  gap: 0;
}

.contacts-dialog__description {
  padding: var(--spacing-xs, 0.75rem);
  background: transparent;
  color: var(--color-text-secondary, var(--gray-600, #4A5565));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
}

.contacts-dialog__body {
  min-width: 0;
  margin-top: var(--spacing-lg, 1.5625rem);
  overflow: auto;
}

.contacts-dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm, 0.938rem);
  width: auto;
  min-width: 0;
  padding: var(--spacing-md, 1.25rem) var(--contacts-dialog-panel-padding-inline);
  border-top: var(--border-width-sm, 0.1rem) solid var(--contacts-dialog-panel-border);
  background: var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
  box-sizing: border-box;
}

.contacts-dialog__footer > solid-ui-button {
  width: var(--contacts-dialog-action-width);
}

/* Shared button tokens */
solid-ui-button.contacts-dialog__action-button {
  --button-font-size-md: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-md, 500);
  --button-background: var(--color-card-bg, var(--white, #FFF));
  --button-text: var(--color-text-control, var(--slate-700, #314158));
  --button-border: transparent;
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-base);
  --button-transition: all 0.3s ease-in-out;
  --button-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
  --button-hover-border: transparent;
  --button-hover-text: var(--color-text-accent-subtle, var(--color-text-control, var(--slate-700, #314158)));
  --button-hover-box-shadow: none;
  --button-active-transform: none;
  --button-active-box-shadow: none;
  --button-focus-outline: 3px solid var(--color-primary);
  --button-focus-outline-offset: 2px;
  --button-focus-box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha));
}

solid-ui-button.contacts-dialog__action-button--primary {
  --button-height-md: 0;
  --button-background: var(--color-primary, #7C4DFF) !important;
  --button-text: var(--color-text-on-action, var(--white, #FFF)) !important;
  --button-border-width: 0.8px;
  --button-border: var(--color-primary, #7C4DFF) !important;
  --button-font-size-md: var(--font-size-md, 1rem);
  --button-font-weight: var(--font-weight-bold, 600);
  --button-line-height: 1;
  --button-padding-md: 0.85rem 1rem;
  --button-hover-background: color-mix(in srgb, var(--color-primary, #7C4DFF) 85%, var(--black, #000)) !important;
  --button-hover-text: var(--color-text-on-action, var(--white, #FFF)) !important;
  --button-hover-border: var(--color-primary, #7C4DFF) !important;
  --button-hover-box-shadow: var(--box-shadow-hover, 0 2px 4px rgba(124, 77, 255, 0.2));
  --button-active-box-shadow: var(--box-shadow-active, 0 1px 2px rgba(124, 77, 255, 0.2));
}

solid-ui-button.contacts-dialog__action-button[disabled],
solid-ui-button.contacts-dialog__action-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  --button-box-shadow: none !important;
  --button-hover-box-shadow: none !important;
  --button-active-box-shadow: none !important;
  --button-active-transform: none;
}

solid-ui-button.contacts-dialog__action-button--primary[disabled],
solid-ui-button.contacts-dialog__action-button--primary[aria-disabled="true"] {
  --button-background: color-mix(in srgb, var(--color-primary, #7C4DFF) 60%, var(--color-card-bg, var(--white, #FFF))) !important;
  --button-border-width: 0.8px;
  --button-border: color-mix(in srgb, var(--color-primary, #7C4DFF) 60%, var(--color-card-bg, var(--white, #FFF))) !important;
  --button-text: var(--color-text-on-action, var(--white, #FFF)) !important;
}

solid-ui-button.contacts-dialog__confirm {
  --button-padding-md: var(--spacing-sm) var(--spacing-md);
  --button-font-size-md: var(--font-size-md, 1rem);
  --button-font-weight: var(--font-weight-md, 500);
  --button-line-height: 1;
  --button-active-box-shadow: none;
}

solid-ui-button.contacts-dialog__cancel {
  --button-padding-md: var(--spacing-sm) var(--spacing-md);
  --button-font-size-md: var(--font-size-md, 1rem);
  --button-font-weight: var(--font-weight-normal, normal);
  --button-background: var(--dialog-cancel-button-background, transparent);
  --button-text: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
  --button-border: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
  --button-border-radius: var(--border-radius-base);
  --button-transition: all 0.3s ease-in-out;
  --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575)) !important;
  --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
  --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  --button-hover-box-shadow: none;
  --button-active-transform: none;
  --button-active-box-shadow: none;
  --button-focus-outline: var(--focus-indicator-width) solid var(--color-primary);
  --button-focus-outline-offset: var(--outline-offset-sm);
  --button-focus-box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-focus-gap, var(--white, #FFF)), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha, rgba(124, 77, 255, 0.2)));
}

solid-ui-button.contacts-dialog__cancel:hover::part(button),
solid-ui-button.contacts-dialog__cancel:focus-visible::part(button),
solid-ui-button.contacts-dialog__cancel:focus-within::part(button) {
  background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
  border-color: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
  color: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
}

solid-ui-button.contacts-dialog__cancel--footer {
  width: var(--contacts-dialog-action-width);
  min-width: var(--contacts-dialog-action-width);
  max-width: var(--contacts-dialog-action-width);
  inline-size: var(--contacts-dialog-action-width);
  align-self: auto;
}

.contacts-dialog__submit-contact {
  width: var(--contacts-dialog-action-width) !important;
  min-width: var(--contacts-dialog-action-width);
  max-width: var(--contacts-dialog-action-width);
  inline-size: var(--contacts-dialog-action-width);
  flex: 0 0 var(--contacts-dialog-action-width);
  align-self: flex-end;
  line-height: 1;
}

.contacts-dialog__address-submit {
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  inline-size: fit-content;
  flex: 0 0 auto;
  align-self: auto;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.contacts-dialog__group-submit {
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  inline-size: fit-content;
  flex: 0 0 auto;
  align-self: auto;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.contacts-dialog__uri-submit {
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  inline-size: fit-content;
  flex: 0 0 auto;
  align-self: auto;
  margin: 0 0 0 auto;
  line-height: 1;
  white-space: nowrap;
}

.contacts-dialog__uri-submit::part(button),
.contacts-dialog__address-submit::part(button) {
  width: auto;
  min-width: 0;
}

/* Selection layout */
.contacts-dialog__details {
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  gap: var(--spacing-sm, 0.938rem);
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  background: transparent;
}

.contacts-dialog__address-book-list {
  flex: 0 0 15rem;
  width: 100%;
  max-width: 16rem;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-sizing: border-box;
}

.contacts-dialog__group-list {
  width: auto;
  max-width: 14rem;
  min-width: 12.5rem;
  box-sizing: border-box;
  gap: 1px;
}

.contacts-dialog__column-title {
  margin: 0 0 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-lg, 1.125rem);
}

#addressbook-list > solid-ui-button#contacts-create-addressbook-button,
#addressbook-list > solid-ui-button#contacts-addressbook-uri-entry-button,
#group-list > solid-ui-button#contacts-create-group-button {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  inline-size: 100% !important;
}

solid-ui-button.contacts-dialog__list-button {
  flex-shrink: 0;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  --button-height-sm: 0;
  --button-padding-sm: 0.85rem 1rem;
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-md, 500);
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-md, 0.5rem);
  --button-selected-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)) !important;
  --button-selected-text: var(--color-text-accent-subtle, var(--color-text-control, var(--slate-700, #314158)));
  --button-selected-border: transparent;
  --button-box-shadow: none !important;
  --button-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)) !important;
  --button-hover-text: var(--color-text-accent-subtle, var(--color-text-control, var(--slate-700, #314158)));
  --button-hover-border: transparent;
  --button-hover-box-shadow: none !important;
  --button-active-transform: none;
  --button-active-box-shadow: none !important;
  --button-focus-outline: none;
  --button-focus-box-shadow: none !important;
}

/* Inline panel shells */
.contacts-dialog__inline-panel-region {
  display: none;
  min-width: 0;
  order: 3;
}

.contacts-dialog__inline-panel-region--active {
  display: block;
  min-width: 0;
  width: min(100%, var(--contacts-dialog-panel-width)) !important;
  max-width: var(--contacts-dialog-panel-width) !important;
  align-self: flex-start;
  order: 3;
}

.contacts-dialog__inline-panel.contacts-dialog__popup {
  position: static;
  inset: auto;
  transform: none;
  min-width: 0;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none;
  margin: 0;
  margin-right: 0;
  overflow: visible;
  box-shadow: none;
  border-left: 1px solid var(--contacts-dialog-panel-border);
}

.contacts-dialog__address-form,
.contacts-dialog__group-form,
.contacts-dialog__uri-entry {
  padding: 0 !important;
  gap: 0;
  box-sizing: border-box;
  border-radius: var(--border-radius-base);
}

.contacts-dialog__address-form {
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch;
  border: 1px solid var(--contacts-dialog-panel-border);
  background: var(--contacts-dialog-panel-background);
}

.contacts-dialog__group-form {
  border: none;
  border-left: 1px solid var(--contacts-dialog-panel-border);
  border-radius: 0;
  background: var(--contacts-dialog-panel-background);
}

.contacts-dialog__uri-entry {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  align-self: flex-start;
  border: 1px solid var(--contacts-dialog-panel-border);
  background: var(--contacts-dialog-panel-background);
}

.contacts-dialog__uri-entry-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  box-sizing: border-box;
  gap: 0;
  background: var(--color-card-bg, #FFF);
}

/* Popup chrome */
.contacts-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 0.938rem);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.contacts-dialog__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
  font-size: var(--font-size-md);
  color: var(--color-text-subheading, var(--gray-900, #101828));
}

.contacts-dialog__popup .contacts-dialog__header {
  border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
}

.contacts-dialog__address-form .contacts-dialog__header,
.contacts-dialog__group-form .contacts-dialog__header,
.contacts-dialog__uri-entry .contacts-dialog__header {
  margin-bottom: 0;
  padding: var(--spacing-md, 1.25rem) var(--spacing-lg, 1.5625rem);
  border-bottom: var(--border-width-sm, 0.1rem) solid var(--contacts-dialog-panel-border);
  background: var(--contacts-dialog-panel-header-background);
}

solid-ui-button.contacts-dialog__close {
  flex: 0 0 auto;
  align-self: flex-start;
  min-inline-size: var(--icon-base, 2rem);
  --button-height-sm: var(--icon-base, 2rem);
  --button-width-sm: var(--icon-base, 2rem);
  --button-padding-sm: 0;
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-border-radius: 999px;
  --button-text: var(--color-text);
  --button-box-shadow: none;
  --button-hover-background: rgba(0, 0, 0, 0.04);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary);
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  --button-icon-size-sm: var(--icon-xxs, 1rem);
}

solid-ui-button.contacts-dialog__close:focus-visible::part(button) {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha));
}

.contacts-dialog__popup-body {
  min-width: 0;
  gap: var(--spacing-base, 0.5rem);
}

.contacts-dialog__address-form .contacts-dialog__popup-body,
.contacts-dialog__group-form .contacts-dialog__popup-body,
.contacts-dialog__uri-entry .contacts-dialog__popup-body {
  padding: var(--spacing-lg, 1.5625rem);
  box-sizing: border-box;
  background: var(--contacts-dialog-panel-body-background);
}

.contacts-dialog__popup .input {
  width: 100%;
  max-width: 100%;
  min-height: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
  border-radius: var(--border-radius-base, 0.3125rem);
  border: 1px solid var(--color-border-button-hover, var(--gray-400, #99A1AF));
  background: var(--color-card-bg, var(--white, #FFF));
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  padding: var(--spacing-2xs, 0.625rem);
  box-sizing: border-box;
  margin-bottom: var(--spacing-base, 0.5rem);
}

.contacts-dialog__address-form .input,
.contacts-dialog__group-form .input,
.contacts-dialog__uri-entry .input {
  margin-bottom: 0;
}

.contacts-dialog__uri-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
}

.contacts-dialog__popup-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  gap: var(--spacing-md);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--border-width-sm, 0.1rem) solid var(--contacts-dialog-panel-border);
  background: var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
}

.contacts-dialog__address-form .contacts-dialog__popup-footer,
.contacts-dialog__group-form .contacts-dialog__popup-footer,
.contacts-dialog__uri-entry .contacts-dialog__popup-footer {
  margin-top: 0;
  gap: var(--spacing-sm, 0.9375rem);
  padding: var(--contacts-dialog-inner-footer-padding);
}

.contacts-dialog__address-form .contacts-dialog__popup-footer,
.contacts-dialog__uri-entry-form .contacts-dialog__popup-footer {
  justify-content: flex-end;
}

.contacts-dialog__popup-footer > solid-ui-button.contacts-dialog__confirm,
.contacts-dialog__popup-footer > solid-ui-button.contacts-dialog__cancel {
  width: var(--contacts-dialog-action-width);
  min-width: var(--contacts-dialog-action-width);
  max-width: var(--contacts-dialog-action-width);
  inline-size: var(--contacts-dialog-action-width);
}

/* Validation and feedback */
.contacts-dialog__validation {
  display: none;
  width: calc(100% - 0.5rem);
  max-width: calc(100% - 0.5rem);
  margin: 0 auto;
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  align-self: stretch;
  box-sizing: border-box;
  color: var(--red-600, #B00020);
  font-size: var(--font-size-sm, 0.875rem);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}

.contacts-dialog__validation--visible {
  display: block;
}

.contacts-dialog__error,
.contacts-dialog__error[role='alert'] {
  position: relative;
  z-index: 3;
  display: none;
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
  border-radius: var(--border-radius-base);
  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
  background-color: var(--dialog-error-background, var(--pink-500, #ffdde6));
  color: var(--dialog-error-text, var(--red-600, #B00020));
  text-align: center;
}

.contacts-dialog__error--visible {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
}

solid-ui-button.contacts-dialog__error-close {
  position: absolute;
  top: var(--spacing-xxxs, 0.2rem);
  right: var(--spacing-xxxs, 0.2rem);
  z-index: 4;
  --button-height-sm: 0;
  --button-padding-sm: 0;
  --button-font-size-sm: var(--font-size-sm);
  --button-background: transparent;
  --button-border: transparent;
  --button-border-width: 0;
  --button-border-radius: 0;
  --button-text: var(--dialog-error-text, var(--red-600, #B00020));
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--dialog-error-text, var(--red-600, #B00020));
  --button-line-height: 1;
  --button-active-transform: none;
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
}

/* Overlays and confirmation popups */
.contacts-dialog__popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: color-mix(in srgb, var(--black, #000) 50%, transparent);
}

.contacts-dialog__popup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: min(calc(24rem - 5px), calc(100% - 1rem - 5px));
  max-width: calc(100% - 1rem - 5px);
  max-height: min(calc(100% - 1rem - 5px), calc(100vh - 6rem - 5px));
  padding: 1rem;
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius-base);
  background: var(--color-surface-overlay, var(--white, #FFF)) !important;
  color: var(--color-text-overlay, var(--gray-800, #1E2939));
  box-shadow: var(--box-shadow-overlay, 0 4px 24px rgba(0, 0, 0, 0.2));
}

.contacts-dialog__shared-confirm-form {
  display: flex;
  flex-direction: column;
}

.contacts-dialog__shared-confirm-message {
  margin: 0;
  color: var(--color-text-overlay, var(--gray-800, #1E2939));
}

.contacts-dialog__shared-confirm-name {
  font-weight: var(--font-weight-bold, 600);
}

.contacts-dialog__contact-exists {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: min(90vw, 20rem);
  padding: 1rem;
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius-base);
  background: var(--color-surface-overlay, var(--white, #FFF));
  color: var(--color-text-overlay, var(--gray-800, #1E2939));
  box-shadow: var(--box-shadow-modal, 0 2px 10px rgba(0, 0, 0, 0.3));
  align-items: center;
  gap: var(--spacing-md, 1rem);
  text-wrap: pretty;
}

.contacts-dialog__contact-exists .contacts-dialog__popup-footer {
  width: 100%;
  justify-content: center;
  gap: var(--spacing-2xs, 0.625rem);
  margin-top: var(--spacing-base, 0.5rem);
  padding-top: 0;
  border-top: none;
  background: transparent;
}

.contacts-dialog__contact-exists .contacts-dialog__confirm,
.contacts-dialog__contact-exists .contacts-dialog__cancel {
  width: auto;
  min-width: 6rem;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

/* Responsive overrides */

/* Explicit mobile layout mode uses the same values as the small-screen rules,
   but plain CSS still needs a separate block because `data-layout` is not a media query. */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__frame {
  max-height: none;
  overflow: visible;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__body {
  padding-bottom: 0;
  overflow: visible;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__footer {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm, 0.9375rem);
  width: 100%;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__footer > solid-ui-button {
  flex: 1 0 0;
  width: auto;
  min-width: 0;
  max-width: none;
  inline-size: auto;
  --button-font-size-md: var(--font-size-md, 1rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__popup {
  max-width: var(--contacts-dialog-mobile-popup-max-width);
  max-height: 78vh;
  padding: 0.85rem;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form {
  width: min(100%, var(--contacts-dialog-panel-width)) !important;
  max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
  margin-inline: auto;
  padding: 0 !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__inline-panel-region {
  min-width: 0;
  width: min(100%, var(--contacts-dialog-list-width)) !important;
  max-width: min(100%, var(--contacts-dialog-list-width)) !important;
  margin-inline: auto;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__inline-panel-region--active {
  width: min(100%, var(--contacts-dialog-panel-width)) !important;
  max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form .contacts-dialog__header,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-form .contacts-dialog__header,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-entry .contacts-dialog__header {
  padding: var(--spacing-sm, 0.9375rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form .contacts-dialog__popup-body,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-form .contacts-dialog__popup-body,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-entry .contacts-dialog__popup-body {
  gap: var(--spacing-base, 0.5rem);
  padding: var(--spacing-sm, 0.9375rem) var(--spacing-sm, 0.9375rem) var(--spacing-lg, 1.5625rem) var(--spacing-sm, 0.9375rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form .input {
  min-height: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.375rem;
  padding: var(--spacing-base, 0.5rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-entry .contacts-dialog__popup-footer,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form .contacts-dialog__popup-footer {
  justify-content: flex-end;
  gap: var(--spacing-sm, 0.9375rem);
  padding: var(--contacts-dialog-inner-footer-padding-mobile);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-form .contacts-dialog__popup-footer {
  justify-content: center;
  gap: var(--spacing-sm, 0.9375rem);
  padding: var(--contacts-dialog-inner-footer-padding-mobile);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-entry .contacts-dialog__popup-footer > solid-ui-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-form .contacts-dialog__popup-footer > solid-ui-button {
  flex: 1 0 0;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: auto !important;
  --button-font-size-md: var(--font-size-md, 1rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-submit,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-submit,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__submit-contact,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__cancel--footer {
  flex: 1 0 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-form .contacts-dialog__popup-footer > solid-ui-button.contacts-dialog__group-submit {
  flex: 0 0 auto;
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  inline-size: fit-content;
  margin: 0 auto;
  align-self: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__details {
  width: 100% !important;
  min-width: 0;
  max-height: none;
  padding: var(--spacing-base, 0.5rem) var(--spacing-base, 0.5rem) 0;
  overflow-y: visible;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__address-book-list,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-list {
  min-width: 0;
  width: min(100%, var(--contacts-dialog-list-width)) !important;
  max-width: min(100%, var(--contacts-dialog-list-width)) !important;
  margin-inline: auto;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__inline-panel.contacts-dialog__popup,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__group-form,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .contacts-dialog__uri-entry {
  width: min(100%, var(--contacts-dialog-panel-width)) !important;
  max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
  margin-inline: auto !important;
  align-self: center;
}

@media (max-width: 576px) {
  .contacts-dialog__frame {
    max-height: none;
    overflow: visible;
  }

  .contacts-dialog__body {
    padding-bottom: 0;
    overflow: visible;
  }

  .contacts-dialog__footer {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.9375rem);
    width: 100%;
  }

  .contacts-dialog__footer > solid-ui-button {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    max-width: none;
    inline-size: auto;
    --button-font-size-md: var(--font-size-md, 1rem);
  }

  .contacts-dialog__popup {
    max-width: var(--contacts-dialog-mobile-popup-max-width);
    max-height: 78vh;
    padding: 0.85rem;
  }

  .contacts-dialog__address-form {
    width: min(100%, var(--contacts-dialog-panel-width)) !important;
    max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
    margin-inline: auto;
    padding: 0 !important;
  }

  .contacts-dialog__inline-panel-region {
    min-width: 0;
    width: min(100%, var(--contacts-dialog-list-width)) !important;
    max-width: min(100%, var(--contacts-dialog-list-width)) !important;
    margin-inline: auto;
  }

  .contacts-dialog__inline-panel-region--active {
    width: min(100%, var(--contacts-dialog-panel-width)) !important;
    max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
  }

  .contacts-dialog__address-form .contacts-dialog__header,
  .contacts-dialog__group-form .contacts-dialog__header,
  .contacts-dialog__uri-entry .contacts-dialog__header {
    padding: var(--spacing-sm, 0.9375rem);
  }

  .contacts-dialog__address-form .contacts-dialog__popup-body,
  .contacts-dialog__group-form .contacts-dialog__popup-body,
  .contacts-dialog__uri-entry .contacts-dialog__popup-body {
    gap: var(--spacing-base, 0.5rem);
    padding: var(--spacing-sm, 0.9375rem) var(--spacing-sm, 0.9375rem) var(--spacing-lg, 1.5625rem) var(--spacing-sm, 0.9375rem);
  }

  .contacts-dialog__address-form .input {
    min-height: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.375rem;
    padding: var(--spacing-base, 0.5rem);
  }

  .contacts-dialog__uri-entry .contacts-dialog__popup-footer,
  .contacts-dialog__address-form .contacts-dialog__popup-footer {
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.9375rem);
    padding: var(--contacts-dialog-inner-footer-padding-mobile);
  }

  .contacts-dialog__group-form .contacts-dialog__popup-footer {
    justify-content: center;
    gap: var(--spacing-sm, 0.9375rem);
    padding: var(--contacts-dialog-inner-footer-padding-mobile);
  }

  .contacts-dialog__uri-entry .contacts-dialog__popup-footer > solid-ui-button,
  .contacts-dialog__address-form .contacts-dialog__popup-footer > solid-ui-button {
    flex: 1 0 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    inline-size: auto !important;
    --button-font-size-md: var(--font-size-md, 1rem);
  }

  .contacts-dialog__uri-submit,
  .contacts-dialog__address-submit,
  .contacts-dialog__submit-contact,
  .contacts-dialog__cancel--footer {
    flex: 1 0 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    inline-size: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .contacts-dialog__group-form .contacts-dialog__popup-footer > solid-ui-button.contacts-dialog__group-submit {
    flex: 0 0 auto;
    width: fit-content;
    min-width: fit-content;
    max-width: fit-content;
    inline-size: fit-content;
    margin: 0 auto;
    align-self: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .contacts-dialog__details {
    width: 100% !important;
    min-width: 0;
    max-height: none;
    padding: var(--spacing-base, 0.5rem) var(--spacing-base, 0.5rem) 0;
    overflow-y: visible;
  }

  .contacts-dialog__address-book-list,
  .contacts-dialog__group-list {
    min-width: 0;
    width: min(100%, var(--contacts-dialog-list-width)) !important;
    max-width: min(100%, var(--contacts-dialog-list-width)) !important;
    margin-inline: auto;
  }

  .contacts-dialog__inline-panel.contacts-dialog__popup,
  .contacts-dialog__group-form,
  .contacts-dialog__uri-entry {
    width: min(100%, var(--contacts-dialog-panel-width)) !important;
    max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
    margin-inline: auto !important;
    align-self: center;
  }
}

/* Tablet and stacked panel layout */
@media (max-width: 900px) {
  .contacts-dialog__frame {
    max-height: none;
    overflow: visible;
  }

  .contacts-dialog__body {
    padding-bottom: 0;
    overflow: visible;
  }

  .contacts-dialog__details {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-height: none;
    gap: var(--spacing-base, 0.5rem);
    padding-bottom: 0;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .contacts-dialog__inline-panel-region,
  .contacts-dialog__inline-panel-region--active,
  .contacts-dialog__address-book-list,
  .contacts-dialog__group-list {
    width: min(100%, var(--contacts-dialog-list-width)) !important;
    max-width: min(100%, var(--contacts-dialog-list-width)) !important;
    min-width: 0;
    margin-inline: auto;
    align-self: center;
  }

  .contacts-dialog__address-book-list {
    padding-bottom: var(--spacing-base, 0.5rem);
    border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
  }

  .contacts-dialog__inline-panel.contacts-dialog__popup,
  .contacts-dialog__address-form,
  .contacts-dialog__group-form,
  .contacts-dialog__uri-entry {
    width: min(100%, var(--contacts-dialog-panel-width)) !important;
    max-width: min(100%, var(--contacts-dialog-panel-width)) !important;
    min-width: 0;
    margin-inline: auto;
    align-self: center;
  }

  .contacts-dialog__creation .contacts-dialog__submit-contact {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    align-self: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

.bio-card,
.bio-card__section {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.profile-grid [data-profile-section='bio'].profile__section,
.profile-grid [data-profile-section='bio'].profile__section--empty {
	--bio-section-content-gap-desktop: var(--spacing-lg, 1.5625rem);
	--bio-section-content-gap-mobile: var(--spacing-sm, 0.9375rem);
}

.bio-card__description-wrap {
	margin: 0;
	position: relative;
	isolation: isolate;
	--bio-description-toggle-top: calc(100% - 1.5em + 0.28em - 11px);
	--bio-description-toggle-transform: translateY(7px);
}

.bio-section__edit-button,
solid-ui-button.bio-section__edit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bio-section--empty {
	border-radius: var(--border-radius-md, 0.5rem);
	gap: var(--bio-section-content-gap-desktop);
}

.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
	margin-top: var(--bio-section-content-gap-desktop);
}

.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
	gap: var(--spacing-2xs, 0.625rem);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section--empty {
	gap: var(--bio-section-content-gap-mobile);
}


:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
	margin-top: var(--bio-section-content-gap-mobile);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
	gap: var(--bio-section-content-gap-mobile);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section__edit-button.profile-section-collapsible__edit-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
	min-width: var(--min-touch-target, 44px);
	min-height: var(--min-touch-target, 44px);
	--button-width-sm: var(--min-touch-target, 44px);
	--button-height-sm: var(--min-touch-target, 44px);
	--button-background: transparent;
	--button-border-width: 0;
	--button-border: transparent;
	--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
	--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
	--button-hover-border: transparent;
	--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
	width: var(--min-touch-target, 44px);
	min-width: var(--min-touch-target, 44px);
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
	background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
	text-decoration: none;
}

.bio-card__description-text {
	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, 1.5);
	overflow: hidden;
}

.bio-card__description-text--overflowing {
	padding-right: 4.5rem;
}

.bio-card__description-text--expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	padding-right: 0;
	overflow: visible;
}

.bio-card__description-toggle,
solid-ui-button.bio-card__description-toggle {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: var(--color-card-bg, #FFFFFF);
	white-space: nowrap;
	z-index: 0;
}

.bio-card__description-toggle {
	border: 0;
	background: none;
	color: var(--color-primary, #7C4DFF);
	cursor: var(--profile-interactive-cursor, pointer);
	font: inherit;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: var(--line-height-base, 1.5);
	min-height: auto;
	min-width: auto;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

solid-ui-button.bio-card__description-toggle {
	min-height: 0;
	min-width: 0;
	--button-height-sm: 0;
	--button-padding-sm: 0;
	--button-font-size-sm: var(--font-size-sm, 0.875rem);
	--button-line-height: var(--line-height-base, 1.5);
	--button-background: none;
	--button-border-width: 0;
	--button-border: transparent;
	--button-text: var(--color-primary, #7C4DFF);
	--button-hover-background: none;
	--button-hover-border: transparent;
	--button-hover-text: var(--color-primary, #7C4DFF);
}

.bio-card__description-wrap .bio-card__description-text:not(.bio-card__description-text--expanded) + .bio-card__description-toggle {
	top: var(--bio-description-toggle-top);
	bottom: auto;
	transform: var(--bio-description-toggle-transform);
}

.bio-card__description-text--expanded + .bio-card__description-toggle,
.bio-card__description-text--expanded + solid-ui-button.bio-card__description-toggle {
	position: static;
	display: block;
	width: fit-content;
	margin-left: auto;
	padding-left: 0;
	top: auto;
	bottom: auto;
	transform: none;
}

.bio-card__description-text--expanded + solid-ui-button.bio-card__description-toggle::part(button) {
	position: static;
	display: inline-flex;
	padding-left: 0;
	top: auto;
	bottom: auto;
	transform: none;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-card__description-text {
	font-size: var(--font-size-sm, 0.875rem);
	line-height: var(--line-height-base, 1.5);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@container profile-pane (max-width: 576px) {
	.bio-section--empty {
		gap: var(--bio-section-content-gap-mobile);
	}

	.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
		margin-top: var(--bio-section-content-gap-mobile);
	}

	.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
		gap: var(--bio-section-content-gap-mobile);
	}

	.bio-card__description-text {
		font-size: var(--font-size-sm, 0.875rem);
		line-height: var(--line-height-base, 1.5);
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.bio-card__description-wrap {
		--bio-description-toggle-top: calc(100% - 1.5em);
		--bio-description-toggle-transform: none;
	}
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-card__description-wrap {
	--bio-description-toggle-top: calc(100% - 1.5em);
	--bio-description-toggle-transform: none;
}

@media (max-width: 576px) {
	.bio-section--empty {
		gap: var(--bio-section-content-gap-mobile);
	}

	.profile-grid [data-profile-section='bio'].profile__section .profile-section-collapsible__header + .profile-section-collapsible__content {
		margin-top: var(--bio-section-content-gap-mobile);
	}

	.profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
		gap: var(--bio-section-content-gap-mobile);
	}

	.bio-card__description-text {
		font-size: var(--font-size-sm, 0.875rem);
		line-height: var(--line-height-base, 1.5);
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.bio-card__description-wrap {
		--bio-description-toggle-top: calc(100% - 1.5em);
		--bio-description-toggle-transform: none;
	}
}

@media (max-width: 768px) {
	.bio-section__edit-button.profile-section-collapsible__edit-button,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
		min-width: var(--min-touch-target, 44px);
		min-height: var(--min-touch-target, 44px);
		--button-width-sm: var(--min-touch-target, 44px);
		--button-height-sm: var(--min-touch-target, 44px);
		--button-background: transparent;
		--button-border-width: 0;
		--button-border: transparent;
		--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
		--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
		--button-hover-border: transparent;
		--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
	}

	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
		width: var(--min-touch-target, 44px);
		min-width: var(--min-touch-target, 44px);
	}

	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
		background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
		text-decoration: none;
	}
}

@container profile-pane (max-width: 768px) {
	.bio-section__edit-button.profile-section-collapsible__edit-button,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button {
		min-width: var(--min-touch-target, 44px);
		min-height: var(--min-touch-target, 44px);
		--button-width-sm: var(--min-touch-target, 44px);
		--button-height-sm: var(--min-touch-target, 44px);
		--button-background: transparent;
		--button-border-width: 0;
		--button-border: transparent;
		--button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
		--button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
		--button-hover-border: transparent;
		--button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
	}

	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
		width: var(--min-touch-target, 44px);
		min-width: var(--min-touch-target, 44px);
	}

	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus-visible {
		background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
		text-decoration: none;
	}
}

/* Social section styles. */

.profile__section[data-profile-section='social'],
.profile__section--empty[data-profile-section='social'] {
  --social-card-collapsed-columns: repeat(5, max-content);
  --social-card-expanded-columns: repeat(3, max-content);
  --social-card-icon-size: var(--icon-base, 2rem);
  --social-card-list-display: flex;
  --social-card-list-columns: none;
  --social-card-list-gap: var(--spacing-xxs, 0.3125rem);
  --social-card-link-gap: var(--spacing-xs, 0.75rem);
  --social-card-link-padding: var(--spacing-xs, 0.75rem);
  --social-card-link-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
  --social-card-hidden-item-display: flex;
  --social-card-more-button-display: none;
  --social-card-more-button-margin-top: var(--spacing-xs, 0.75rem);
  border: var(--border-width-thin, 1px) solid var(--color-border-lighter, #D1D5DB);
}

.profile__section--empty[data-profile-section='social'] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card and list */
.social-card,
.social-card__list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.social-card__list {
  display: var(--social-card-list-display);
  grid-template-columns: var(--social-card-list-columns);
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--social-card-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-card__item,
.social-card__link,
.profile__section--empty[data-profile-section='social'] .profile__empty-state-content {
  display: flex;
  align-items: center;
}

.profile__section--empty[data-profile-section='social'] .profile__empty-state-content {
  flex-direction: column;
  gap: var(--spacing-2xs, 0.625rem);
}

.social__empty-icon {
  display: inline-flex;
}

/* Links */
.social-card__link {
  color: var(--color-primary, #7C4DFF);
  text-decoration: none;
  gap: var(--social-card-link-gap);
  padding: var(--social-card-link-padding);
  border-radius: var(--border-radius-base, 0.3125rem);
  transition: background-color var(--animation-duration, 0.2s) ease;
  position: relative;
  flex: 1;
  min-width: 0;
}

.social-card__link:hover,
.social-card__link:focus {
  text-decoration: underline;
  background-color: var(--social-card-link-hover-background);
}

.social-card__link[href^="http"]:after {
  content: " (external link)";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.social-card__icon {
  width: var(--social-card-icon-size);
  height: var(--social-card-icon-size);
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--color-card-bg, #FFFFFF);
  flex-shrink: 0;
}

/* Toggle button */

solid-ui-button.social-card__more-button {
  --button-height-sm: 0;
  --button-padding-x-sm: 0;
  --button-background: transparent;
  --button-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
}

.social-card__more-button,
solid-ui-button.social-card__more-button::part(button) {
  display: var(--social-card-more-button-display);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary, #7C4DFF);
  font: inherit;
  font-weight: var(--font-weight-bold, 600);
  cursor: var(--profile-interactive-cursor, pointer);
}

.social-card[data-mobile-expanded="false"] .social-card__item:nth-child(n + 11) {
  display: var(--social-card-hidden-item-display);
}

.social-card[data-mobile-expanded="true"] {
  --social-card-list-columns: var(--social-card-expanded-columns);
  --social-card-hidden-item-display: flex;
  --social-card-more-button-display: none;
}

/* Compact layout */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='social'],
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='social'] {
  --social-card-list-display: grid;
  --social-card-list-columns: var(--social-card-collapsed-columns);
  --social-card-hidden-item-display: none;
  --social-card-more-button-display: inline-flex;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .social-card .social-card__list {
  justify-content: flex-start;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='social'] .profile-section-collapsible__toggle-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='social'] .profile-section-collapsible__toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .social-card__more-button,
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.social-card__more-button::part(button) {
  margin-top: var(--social-card-more-button-margin-top);
}

@media (max-width: 768px) {
  .profile__section[data-profile-section='social'],
  .profile__section--empty[data-profile-section='social'] {
    --social-card-list-display: grid;
    --social-card-list-columns: var(--social-card-collapsed-columns);
    --social-card-hidden-item-display: none;
    --social-card-more-button-display: inline-flex;
  }

  .social-card .social-card__list {
    justify-content: flex-start;
  }

  .social-card__more-button,
  solid-ui-button.social-card__more-button::part(button) {
    margin-top: var(--social-card-more-button-margin-top);
  }
}

@container profile-pane (max-width: 768px) {
  .profile__section[data-profile-section='social'],
  .profile__section--empty[data-profile-section='social'] {
    --social-card-list-display: grid;
    --social-card-list-columns: var(--social-card-collapsed-columns);
    --social-card-hidden-item-display: none;
    --social-card-more-button-display: inline-flex;
  }

  .social-card .social-card__list {
    justify-content: flex-start;
  }

  .social-card__more-button,
  solid-ui-button.social-card__more-button::part(button) {
    margin-top: var(--social-card-more-button-margin-top);
  }
}
/* QR code section styles. */

.profile__qr-code {
  --qrcode-card-gap: var(--spacing-md, 1.25rem);
  --qrcode-card-caption-color: var(--color-text-strong-secondary, var(--gray-800, #1E2939));
  --qrcode-card-caption-size: var(--font-size-md, 1rem);
  --qrcode-card-caption-size-compact: var(--font-size-sm, 0.875rem);
  --qrcode-card-caption-weight: var(--font-weight-md, 500);
  --qrcode-card-image-padding: 1.0625rem;
  --qrcode-card-frame-border: var(--border-width-thin, 0.1rem) solid var(--color-border, var(--gray-200, #E5E7EB));
  --qrcode-card-frame-background: var(--color-surface-framed-content, #F3F4F6);
  --qrcode-section-padding-compact: var(--spacing-sm, 0.938rem);
  --qrcode-section-gap-compact: var(--spacing-2xs, 0.625rem);
  border-radius: var(--border-radius-base, 0.3125rem);
  background: var(--color-card-bg, var(--white, #FFF));
  border: var(--border-width-thin, 0.1rem) solid var(--color-border-lighter, #E2E8F0);
}

/* Caption */
.qrcode-card__caption {
  text-align: center;
  margin: 0;
  color: var(--qrcode-card-caption-color);
  font-size: var(--qrcode-card-caption-size);
  font-weight: var(--qrcode-card-caption-weight);
}

/* Card and frame */
.qrcode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qrcode-card-gap);
  align-self: stretch;
}

.qrcode-card__frame {
  margin: 0;
  padding: var(--qrcode-card-image-padding);
  border-radius: var(--border-radius-base, 0.3125rem);
  border: var(--qrcode-card-frame-border);
  background: var(--qrcode-card-frame-background);
}

/* QR image */
.qrcode-card__image {
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.qrcode-card__image svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Compact layout */
:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__qr-code {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: var(--qrcode-section-padding-compact);
  gap: var(--qrcode-section-gap-compact);
}

@container profile-pane (max-width: 576px) {
  .profile__qr-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--qrcode-section-padding-compact);
    gap: var(--qrcode-section-gap-compact);
  }
}

:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .qrcode-card__caption {
  font-size: var(--qrcode-card-caption-size-compact);
}

@media (max-width: 576px) {
  .profile__qr-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--qrcode-section-padding-compact);
    gap: var(--qrcode-section-gap-compact);
  }

  .qrcode-card__caption {
    font-size: var(--qrcode-card-caption-size-compact);
  }
}

@container profile-pane (max-width: 576px) {
  .qrcode-card__caption {
    font-size: var(--qrcode-card-caption-size-compact);
  }
}
.pad-layout {
  background-color: white;
  min-width: 94%;
  margin-right: 3%;
  margin-left: 3%;
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pad-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.pad-main {
  flex: 1 1 100%;
  width: 100%;
}

.pad-controls {
  gap: 0.5rem;
  align-items: center;
}

.pad-cell {
  flex: 1 1 auto;
}

.pad-new-instance-message {
  font-size: 140%;
}

@media (max-width: 600px) {
  .pad-controls .pad-cell {
    flex: 1 1 100%;
  }
}

.schedule-pane__table {
  border-collapse: collapse;
  background-color: white;
  min-width: 40rem;
  min-height: 13rem;
}

.schedule-pane__button {
  background-color: #eef;
  padding: var(--spacing-xs, 0.5rem);
  border: .5rem solid white;
  font-size: 100%;
}

.schedule-pane__button-icon {
  width: var(--icon-sm, 1.8rem);
  height: var(--icon-sm, 1.8rem);
}

.schedule-pane__nav {
  text-align: center;
  vertical-align: middle;
  padding-top: 4rem;
}

.schedule-pane__cell {
  padding: var(--spacing-xs, 0.3rem);
  text-align: center;
}

.schedule-pane__table .schedule-pane__form-heading {
  font-size: 110% !important;
  font-weight: bold;
  color: #888888;
  padding: 0.2em;
  margin: 0.7em 0 !important;
}

.schedule-pane__table .schedule-pane__form-heading--time-proposals {
  margin-bottom: 0 !important;
}

.schedule-pane__table .schedule-pane__panel--time-proposals {
  padding-bottom: 0.9rem !important;
  border: none !important;
}

.schedule-pane__table .schedule-pane__panel {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  margin-right: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .schedule-pane__table .schedule-pane__main-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  .schedule-pane__table .schedule-pane__field-row--comment {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .schedule-pane__table .schedule-pane__field-row--comment > div:first-child {
    width: auto !important;
    min-width: 4.5rem;
    flex: 0 1 6rem;
  }

  .schedule-pane__table .schedule-pane__field-value--comment {
    min-width: 0;
    flex: 1 1 20rem;
    width: auto;
    padding-right: 0.25rem;
    box-sizing: border-box;
  }

  .schedule-pane__table .schedule-pane__field-value--comment .schedule-pane__form-control--textarea,
  .schedule-pane__table .schedule-pane__field-row--comment .schedule-pane__form-control--textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0.2rem 0 0 !important;
    padding: 0.5rem 0.45rem;
  }
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table {
  min-width: 0;
  width: 100%;
  min-height: 0;
  table-layout: fixed;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table td,
div.schedule-pane[data-layout='mobile'] .schedule-pane__table th {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__main-cell {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  box-sizing: border-box;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--compact {
  align-items: flex-start;
  gap: 0.25rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--compact .formFieldName {
  width: auto !important;
  min-width: 4.5rem;
  flex: 0 1 5.5rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--compact .formFieldValue {
  min-width: 0;
  flex: 1 1 auto;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--compact .schedule-pane__form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin: 0.2rem 0 0 !important;
  font-size: var(--font-size-sm, 0.875rem);
  padding: 0.35rem 0.45rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 0.25rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment .formFieldName,
div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment > div:first-child {
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment .formFieldValue,
div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment > div:last-child,
div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-value--comment {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  width: 100%;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-row--comment .schedule-pane__form-control--textarea,
div.schedule-pane[data-layout='mobile'] .schedule-pane__table .schedule-pane__field-value--comment .schedule-pane__form-control--textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin: 0 !important;
  font-size: var(--font-size-sm, 0.875rem);
  padding: 0.35rem 0.45rem;
  min-height: 5.5rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__button {
  padding: 0.4rem;
  border-width: 0.2rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__button-icon {
  width: 1.35rem;
  height: 1.35rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__nav {
  padding-top: 1rem;
}

div.schedule-pane[data-layout='mobile'] .schedule-pane__cell {
  padding: 0.2rem;
}

@media (max-width: 576px) {
  .schedule-pane__table {
    min-width: 0;
    width: 100%;
    min-height: 0;
    table-layout: fixed;
  }

  .schedule-pane__table td,
  .schedule-pane__table th {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .schedule-pane__table .schedule-pane__main-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
  }

  .schedule-pane__table .schedule-pane__field-row--compact {
    align-items: flex-start;
    gap: 0.25rem;
  }

  .schedule-pane__table .schedule-pane__field-row--compact .formFieldName {
    width: auto !important;
    min-width: 4.5rem;
    flex: 0 1 5.5rem;
  }

  .schedule-pane__table .schedule-pane__field-row--compact .formFieldValue {
    min-width: 0;
    flex: 1 1 auto;
  }

  .schedule-pane__table .schedule-pane__field-row--compact .schedule-pane__form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0.2rem 0 0 !important;
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.35rem 0.45rem;
  }

  .schedule-pane__table .schedule-pane__field-row--comment {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.25rem;
  }

  .schedule-pane__table .schedule-pane__field-row--comment .formFieldName,
  .schedule-pane__table .schedule-pane__field-row--comment > div:first-child {
    width: auto !important;
    min-width: 0;
    flex: 0 0 auto;
  }

  .schedule-pane__table .schedule-pane__field-row--comment .formFieldValue,
  .schedule-pane__table .schedule-pane__field-row--comment > div:last-child,
  .schedule-pane__table .schedule-pane__field-value--comment {
    min-width: 0;
    display: block;
    flex: 1 1 auto;
    width: 100%;
  }

  .schedule-pane__table .schedule-pane__field-row--comment .schedule-pane__form-control--textarea,
  .schedule-pane__table .schedule-pane__field-value--comment .schedule-pane__form-control--textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.35rem 0.45rem;
    min-height: 5.5rem;
  }

  .schedule-pane__button {
    padding: 0.4rem;
    border-width: 0.2rem;
  }

  .schedule-pane__button-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .schedule-pane__nav {
    padding-top: 1rem;
  }

  .schedule-pane__cell {
    padding: 0.2rem;
  }
}

:root {
  --icon-sm: 1.8em;
  --color-background-row-default: white;
  --color-background-row-alternate: #f0f0f0;
}
.image-pane__image {
  max-width: 100%;
  max-height: 100%;
}

.social-pane-host,
.social-pane {
  --profile-interactive-cursor: pointer;
  display: block;
  background: var(--color-background, #F8F9FB);
  border-radius: var(--border-radius-base, 0.3125rem);
  overflow: visible;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  max-width: none;
  margin: 0;
}

.social-pane__header-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  column-gap: var(--spacing-md, 1.25rem);
  row-gap: var(--spacing-xxs, 0.3125rem);
  min-width: 0;
  width: 100%;
}

.social-pane__header-media {
  grid-column: 1;
  grid-row: 1;
}

.social-pane__header-details {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.social-pane__header-actions {
  grid-column: 3;
  grid-row: 1;
  margin-left: auto;
  align-self: flex-start;
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs, 0.5rem);
  flex-wrap: wrap;
}

.social-pane__header-actions--friend {
  justify-content: center;
}

.social-pane__header-actions--friend > solid-ui-button {
  margin-inline: auto;
  --button-border-radius: var(--border-radius-md, 0.5rem);
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-hover-border: var(--color-primary, #7C4DFF);
}

.social-pane__header-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs, 0.125rem);
  width: 100%;
  max-width: 100%;
}

.social-pane__header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.75rem);
  justify-content: flex-start;
  align-self: flex-start;
  margin-top: var(--spacing-xxs, 0.3125rem);
}

.social-pane__header-stat {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: var(--profile-interactive-cursor, pointer);
  color: var(--slate-700, #314158);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 600);
  line-height: var(--line-height-tight, 1.4);
  padding: 0;
  text-decoration: none;
}

.social-pane__header-stat + .social-pane__header-stat::before {
  content: '◆';
  color: var(--gray-400, #99A1AF);
  font-size: 0.5rem;
  margin-right: var(--spacing-xs, 0.75rem);
  vertical-align: middle;
}

.social-pane__header-stat:hover .social-pane__header-stat-label {
  text-decoration: underline;
}

.social-pane__header-stat:focus-visible {
  outline: var(--border-width-medium, 2px) solid #111827;
  outline-offset: 2px;
}

.social-pane__edit-button {
  position: static;
  display: inline-block;
  min-width: 0;
  width: auto;
  max-width: none;
  --button-height-sm: 0;
  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
  --button-background: transparent;
  --button-border: transparent;
  --button-border-width: 0;
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-font-weight: var(--font-weight-regular, 400);
  --button-line-height: var(--line-height-base, 1.5);
  --button-icon-size-sm: 0.875rem;
}

.social-pane__edit-button::part(button):hover {
  text-decoration: underline;
}

.social-pane__edit-button::part(button):focus-visible {
  outline: var(--border-width-medium, 2px) solid var(--color-primary, #7C4DFF);
  outline-offset: 2px;
}

.social-pane__edit-button-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs, 0.3125rem);
}

.social-pane__edit-button .profile-section-collapsible__edit-icon,
.social-pane__edit-button-icon {
  display: none;
  line-height: 0;
}

.social-pane__edit-button-label svg,
.social-pane__edit-button-icon svg,
.social-pane__edit-button .profile-section-collapsible__edit-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.social-pane__edit-button-label svg path,
.social-pane__edit-button-icon svg path,
.social-pane__edit-button .profile-section-collapsible__edit-icon svg path {
  fill: var(--color-primary, #7C4DFF);
  stroke: none;
}

.social-pane__dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 1rem;
  background: rgb(15 23 42 / 0.45);
}

.social-pane__dialog {
  position: relative;
  width: min(32rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border-radius: 1rem;
  background: var(--white, #fff);
  color: var(--color-text, #111827);
  padding: var(--spacing-md, 1.25rem);
  box-shadow: 0 20px 45px rgb(15 23 42 / 0.25);
}

.social-pane__dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md, 1rem);
  padding-bottom: var(--spacing-base, 0.5rem);
  margin-bottom: var(--spacing-sm, 0.938rem);
  border-bottom: var(--border-width-sm, 0.1rem) solid var(--slate-200, #E2E8F0);
}

.social-pane__dialog-title {
  margin: 0 0 var(--spacing-base, 0.5rem);
}

.social-pane__dialog-close {
  flex: 0 0 auto;
  --button-background: transparent;
  --button-border: transparent;
  --button-border-width: 0;
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  color: var(--color-text-subheading, #6b7280);
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.social-pane__dialog-close:hover {
  color: var(--color-text-primary, #364153);
}

.social-pane__dialog-close:focus-visible {
  outline: var(--border-width-medium, 2px) solid var(--color-text-primary, #364153);
  outline-offset: 2px;
}

.social-pane__dialog-close svg {
  width: var(--icon-xxxs, 0.75rem);
  height: var(--icon-xxxs, 0.75rem);
}

.social-pane__dialog-close svg path {
  fill: currentColor;
}

.social-pane__dialog-form {
  gap: var(--spacing-sm, 0.938rem);
}

.social-pane__dialog-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.938rem);
}

.social-pane__dialog-field {
  gap: 0.2rem;
}

.social-pane__dialog-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs, 0.75rem);
}

.social-pane__dialog-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.social-pane__dialog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.social-pane__dialog-label {
  margin: 0;
  color: var(--gray-700, #364153);
  font-size: var(--font-size-md, 1rem); /* 16px */
  font-weight: var(--font-weight-md, 500);
  line-height: normal;
}

.social-pane__dialog-input {
  width: 100%;
  box-sizing: border-box;
  min-height: auto;
  resize: none;
}

.social-pane__dialog-error {
  min-height: 1.25rem;
  margin: 0;
  color: var(--color-warning, red);
}

.social-pane__dialog-saving-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  z-index: 10;
}

.social-pane__dialog-saving-overlay[hidden] {
  display: none;
}

.social-pane__dialog.modal--saving .social-pane__dialog-form {
  opacity: 0.45;
  pointer-events: none;
}

.social-pane__dialog .modal__saving-indicator {
  gap: 0;
}

.social-pane__dialog-row-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: 0 0 auto;
}

.social-pane__dialog-row-button-icon svg {
  display: block;
}

.social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add {
  justify-self: flex-start;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-left: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  --button-min-height: auto;
  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
  --button-background: transparent;
  --button-border: transparent;
  --button-border-width: 0;
  --button-hover-background: transparent;
  --button-hover-border: transparent;
  --button-text: var(--color-primary, #7C4DFF);
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-height-sm: auto;
  --button-font-weight: var(--font-weight-md, 500);
  --button-font-size-sm: var(--font-size-sm, 0.875rem);
  --button-line-height: var(--line-height-base, 1.5);
}

.social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add::part(button) {
  min-height: auto;
  padding: var(--spacing-xxs, 0.3125rem);
  border: none;
  background: none;
  color: var(--color-primary, #7C4DFF);
  font-weight: var(--font-weight-md, 500);
}

.social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add:hover::part(button) {
  text-decoration: underline;
}

.social-pane__add-more-content {
  display: inline;
}

.social-pane__add-more-inline {
  display: inline;
  white-space: normal;
}

.social-pane__add-more-icon {
  display: inline-block;
  width: var(--icon-xxxs, 0.75rem);
  height: var(--icon-xxxs, 0.75rem);
  margin-right: var(--spacing-xxs, 0.3125rem);
  line-height: 0;
  vertical-align: text-top;
}

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

.social-pane__dialog-row-list solid-ui-button.social-pane__dialog-row-button--remove {
  min-height: var(--min-touch-target, 44px);
  min-width: var(--min-touch-target, 44px);
  color: var(--gray-300, #D1D5DC);
  --button-background: transparent;
  --button-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
  --button-border: transparent;
  --button-border-width: 0;
  --button-border-radius: var(--border-radius-base, 0.3125rem);
  --button-hover-background: var(--lavender-300, #e6dcff);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-primary, #7C4DFF);
  --button-hover-box-shadow: none;
  --button-text: currentColor;
  --button-height-md: var(--min-touch-target, 44px);
  --button-padding-md: 0;
  --button-padding-x-sm: 0;
  --button-icon-size-md: var(--icon-xxs, 1rem);
  --button-icon-size-lg: var(--icon-xxs, 1rem);
}

.social-pane__dialog-row-list solid-ui-button.social-pane__dialog-row-button--remove:hover,
.social-pane__dialog-row-list solid-ui-button.social-pane__dialog-row-button--remove:focus-within {
  color: var(--gray-300, #D1D5DC);
}

.social-pane__dialog-row-button-icon--remove svg {
  width: 1rem;
  height: 1rem;
}

.social-pane__dialog-row-button-icon--remove svg path {
  stroke: currentColor;
}

.social-pane__dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs, 0.75rem);
  padding-top: var(--spacing-base, 0.5rem);
  margin-top: 0;
  border-top: var(--border-width-sm, 0.1rem) solid var(--slate-200, #E2E8F0);
}

.social-pane__dialog-actions > solid-ui-button {
  width: 10.8rem;
}

.social-pane__dialog-actions > solid-ui-button {
  --button-border-width: 1px;
  --button-border-radius: var(--border-radius-base, 0.3125rem);
  --button-box-shadow: none;
  --button-hover-box-shadow: none;
  --button-active-box-shadow: none;
  --button-active-transform: none;
}

.social-pane__dialog-actions solid-ui-button.social-pane__dialog-button--save {
  --button-font-size-md: var(--font-size-lg, 1.125rem);
  --button-background: var(--color-primary, #7C4DFF);
  --button-border: var(--color-primary, #7C4DFF);
  --button-text: var(--white, #FFF);
  --button-hover-background: color-mix(in srgb, var(--color-primary, #7C4DFF) 90%, black);
  --button-hover-border: color-mix(in srgb, var(--color-primary, #7C4DFF) 90%, black);
  --button-hover-text: var(--white, #FFF);
}

.social-pane__dialog-actions solid-ui-button.social-pane__dialog-button--cancel {
  --button-background: var(--white, #FFF);
  --button-border: var(--gray-300, #D1D5DC);
  --button-font-weight: var(--font-weight-normal, normal);
  --button-text: var(--gray-800, #1E2939);
  --button-hover-background: var(--blue-900, #083575);
  --button-hover-border: var(--blue-900, #083575);
  --button-hover-text: var(--white, #FFF);
  --button-font-size-md: var(--font-size-sm, 0.875rem);
}

.social-pane__header-name {
  color: var(--color-text-heading, #000);
  font-size: var(--font-size-xxl, 1.75rem); /* 28px */
  font-weight: var(--font-weight-bold, 600);
  margin: 0;
  padding: 0;
  text-indent: 0;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
  transform: translateX(-4px);
}

.social-pane__header-location {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs, 0.625rem);
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.2;
}

.social-pane__header-job-org {
  margin: 0;
  color: var(--color-text-subheading, #101828);
  width: 100%;
  white-space: normal;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-md, 500);
  line-height: 1.25;
  text-align: left;
}

.social-pane__header-location-icon {
  line-height: 0;
}

.social-pane__header-location-icon svg {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
}

.social-profile-links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: start;
  column-gap: 1rem;
  row-gap: 0.15rem;
}

.social-pane__header-hero {
  width: 140px;
  height: 140px;
  border-radius: var(--border-radius-full, 0.625rem); /* 10px */;
  border: var(--border-width-sm, 0.1rem) solid var(--color-primary, #7C4DFF);
  background: var(--gray-200, #E5E7EB) 50% / cover no-repeat;
  background-position: 50%;
  object-fit: cover;
  object-position: center;
}

.social-pane__header-hero-icon {
  width: 140px;
  height: 140px;
  border-radius: var(--border-radius-full, 0.625rem) !important;
  border: var(--border-width-sm, 0.1rem) solid var(--color-primary, #7C4DFF);
  background: var(--color-card-bg);
  line-height: 0;
  flex-shrink: 0;
}

.social-pane__header-hero-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}


.social-pane .social-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.social-pane .social-primary {
  flex: 1 1 70%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto);
  gap: 0;
  align-items: start;
}

.social-pane .social-primary__tabs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-base, 0.5rem);
  padding: 0;
  background: transparent;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.social-pane .social-primary__tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: var(--border-width-sm, 0.1rem) solid transparent;
  border-radius: 0;
  background: transparent;
  color: #374151;
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-bold, 600);
  padding: var(--spacing-2xs, 0.625rem) 1rem;
  box-shadow: none !important;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.social-pane .social-primary__tab:hover {
  background: var(--lavender-300, #e6dcff) !important;
  color: var(--grey-purple-900, #332746);
  box-shadow: none !important;
}

.social-pane .social-primary__tab[aria-selected='true'],
.social-pane .social-primary__tab--active {
  background: transparent;
  color: var(--grey-purple-900, #332746);
  box-shadow: none !important;
  border-bottom-color: var(--color-primary, #7C4DFF);
}

.social-pane .social-primary__tab:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: none !important;
}

.social-pane .social-primary__panel {
  grid-column: 1;
  grid-row: 2;
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.social-pane .social-primary__panel--active {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  border: 0;
  border-bottom: var(--border-width-sm, 0.1rem) solid transparent;
  transition: opacity 180ms ease, transform 180ms ease;
}

.social-pane .social-pane__mutual-friends,
.social-pane .social-pane__all-friends {
  margin-top: 0;
  padding-top: var(--spacing-xxxs, 0.2rem);
}

.social-pane .social-main {
  display: table;
  background-color: var(--color-card-bg, #fff);
  color: var(--color-text-primary, #364153);
  border: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  border-collapse: collapse;
}

.social-pane .social-main--mutual {
  gap: var(--spacing-xs, 0.75rem);
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 1rem;
  border-radius: var(--border-radius-lg, 0.75rem);
}

.social-pane .social-main--requests {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--border-radius-lg, 0.75rem);
}

.social-requests__note {
  margin: 0;
  color: var(--color-text-subheading, #475467);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

.social-requests__group {
  gap: var(--spacing-sm, 0.938rem);
}

.social-requests__group-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.social-requests__group-title {
  margin: 0;
  color: var(--color-text-heading, #101828);
  font-size: var(--font-size-lg, 1.125rem);
  line-height: 1.25;
}

.social-requests__group-description,
.social-requests__empty {
  margin: 0;
  color: var(--color-text-subheading, #667085);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

.social-requests__table {
  margin-top: 0;
}

.social-pane .social-mutual-summary {
  gap: var(--spacing-base, 0.5rem);
}

.social-pane .social-mutual-summary-line {
  color: var(--slate-700, #314158);
  font-size: var(--font-size-sm, 0.95rem);
  line-height: var(--line-height-base, 1.5);
  justify-content: flex-start;
  padding: 1rem;
}

.social-pane .social-mutual-summary-line--action {
  flex-wrap: wrap;
  gap: var(--spacing-xxs, 0.75rem);
}

.social-pane .social-mutual-confirm-prompt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xxxs, 0.2rem);
  font-weight: var(--font-weight-semibold, 600);
}

.social-pane .social-pane__friend-action--inline {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  align-self: flex-start;
}

.social-pane .social-mutual-checkbox-form {
  display: block;
  margin: 0;
  padding: 0 1rem 1rem;
}

.social-pane .social-mutual-checkbox-form label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xs, 0.65rem);
  color: var(--slate-700, #374151);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
}

.social-pane .social-mutual-checkbox-form input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-primary, #7C4DFF);
}

.social-pane .social-mutual-checkbox-form input[type='checkbox']:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.social-pane .social-friends-list {
  width: 100%;
  margin-top: 0;
}

.social-pane .social-friends-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  gap: var(--spacing-xs, 0.75rem);
}

.social-pane .social-friends-grid > tbody {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  gap: var(--spacing-xs, 0.75rem);
}

.social-pane .social-friends-grid > tr,
.social-pane .social-friends-grid > tbody > tr {
  display: inline-table;
  width: calc(50% - 0.375rem);
  table-layout: fixed;
  box-sizing: border-box;
}

.social-pane .social-friends-grid > tr,
.social-pane .social-friends-grid > tbody > tr,
.social-pane .social-friend-card {
  border: 1px solid var(--gray-200, #E5E7EB);
  background: var(--white, #fff);
  border-radius: var(--border-radius-lg, 0.75rem);
  overflow: visible;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.social-pane .social-friends-grid > tr:hover,
.social-pane .social-friends-grid > tbody > tr:hover,
.social-pane .social-friend-card:hover {
  border-color: var(--gray-300, #D1D5DC);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
  transform: translateY(-1px);
}

.social-pane .social-friends-grid > tr td,
.social-pane .social-friends-grid > tbody > tr td,
.social-pane .social-friend-card td {
  background: var(--color-background, #F8F9FB);
  box-sizing: border-box;
}

.social-pane .social-friends-grid > tr > td:nth-child(2),
.social-pane .social-friends-grid > tbody > tr > td:nth-child(2) {
  width: auto;
  min-width: 0;
  padding-left: 1.4rem;
}

.social-pane .social-friends-grid > tr > td:nth-child(3),
.social-pane .social-friends-grid > tbody > tr > td:nth-child(3) {
  width: 2.5rem;
  min-width: 2.5rem;
  padding-left: 0.25rem;
  vertical-align: top;
}

.social-pane .social-friends-grid > tr > td:first-child,
.social-pane .social-friends-grid > tbody > tr > td:first-child {
  padding-right: 1.2rem;
}

.social-pane .social-friends-grid td > div > div {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.social-pane .social-friends-grid td > div > div button {
  white-space: normal !important;
}

.social-pane .social-friends-grid > tr > td:nth-child(2) > div:first-child,
.social-pane .social-friends-grid > tbody > tr > td:nth-child(2) > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.2rem 0.4rem;
  min-width: 0;
}

/* change the style of the name / label in the friend card */
.social-pane .social-friends-grid > tr > td:nth-child(2) > div:first-child > span:first-of-type,
.social-pane .social-friends-grid > tbody > tr > td:nth-child(2) > div:first-child > span:first-of-type {
  display: inline-block;
  max-width: 100%;
  vertical-align: text-top;
  font-size: var(--font-size-lg, 1.125rem); /* 18px */
  font-weight: var(--font-weight-bold, 600); /* new design uses 600 */
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.social-pane .social-friend-pronouns {
  display: inline;
  margin-left: var(--spacing-xs, 0.25rem);
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem); /* 14px */
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.2;
  text-align: left;
}

.social-pane .social-friend-job-org {
  margin: 0;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--color-text-subheading, #101828);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.25;
  text-align: left;
}

.social-pane .social-friend-location {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-xs, 0.8125rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .social-pane .social-friends-grid > tr,
  .social-pane .social-friends-grid > tbody > tr {
    width: 100%;
  }
}

.social-pane .social-friends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-xs, 0.75rem) var(--spacing-base, 0.5rem);
  background-color: var(--gray-100, #F3F4F6);
  caption-side: top;
  margin-top: 0;
}

.social-pane .social-friends-header-title {
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-text-primary, #364153);
}

.social-pane .social-friends-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.social-pane .social-friends-header-actions--standalone {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.75rem);
  justify-content: flex-start;
  padding: 0.7rem 1rem 0;
}

.social-pane .social-friends-header-dropzone {
  border-collapse: collapse;
}

.social-pane .social-friends-header-dropzone-cell {
  padding: 0;
}

.social-pane .social-friends-header-hint {
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
}

.social-pane .social-friends-header-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}

.social-pane .social-friends-header-actions button img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  pointer-events: none;
}

/* From tabbedtab.css */
/* ***************** Social Pane **********/

div.social-pane {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.social-pane a {
  color: var(--color-primary, #7C4DFF);
  text-decoration: none;
  font-weight: bold;
}
.social-pane a:hover {
  color: var(--color-primary, #7C4DFF);
  text-decoration: underline;
  font-weight: bold;
}
.social-pane a:active {
  color: var(--color-primary, #7C4DFF);
  text-decoration: none;
}

.social-pane__link-button {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  white-space: nowrap;
  background-color: transparent;
  border: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: var(--spacing-xxxs, 0.2rem) var(--spacing-base, 0.5rem);
  text-align: left;
}

.social-pane__link-button > a {
  display: inline-flex;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  background-color: transparent;
  color: var(--color-primary, #7C4DFF);
}

.social-pane__link-button > a:link,
.social-pane__link-button > a:visited,
.social-pane__link-button > a:hover {
  color: var(--color-primary, #7C4DFF);
}

.social-pane__link-button > a:hover {
  text-decoration: underline;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-content {
  display: grid;
  grid-template-columns: 4.375rem minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--spacing-md, 1rem);
  row-gap: 0.25rem;
  padding: 1rem 1rem 0;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-media {
  display: contents;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-details {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  justify-content: flex-end;
  width: auto;
  gap: var(--spacing-2xs, 0.3125rem);
  margin-left: 0;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-actions--friend {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: stretch;
  justify-content: center;
  width: 100%;
  margin-left: 0;
  margin-top: 0.125rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-name, .social-pane__header-job-org, .social-pane__header-location) {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-stats {
  width: 100%;
  justify-content: flex-start;
  align-self: flex-start;
  gap: var(--spacing-xs, 0.5rem);
  margin-top: -0.4375rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-profile-links {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: 1fr;
  row-gap: var(--spacing-xxxs, 0.2rem);
  justify-items: start;
  padding-left: 0;
  margin-top: -0.375rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-primary__tabs,
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-primary__tabs {
  margin-top: -0.5rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__link-button {
  justify-self: start;
  padding-left: 0;
  padding-right: 0;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__link-button > a {
  font-size: var(--font-size-sm, 0.875rem);
  text-align: left;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-field-header {
  grid-template-columns: minmax(0, 1fr);
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-hero, .social-pane__header-hero-icon) {
  grid-column: 1;
  grid-row: 1;
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1 / 1;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-name {
  font-size: var(--font-size-xl, 1.375rem);
  line-height: 1.15;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-job-org {
  font-size: var(--font-size-md, 1rem);
  line-height: 1.25;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friend-pronouns {
  font-size: 0.6875rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-location, .social-pane__header-stat),
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friend-location {
  font-size: var(--font-size-xxs, 0.75rem);
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-label, .social-pane__edit-button .profile-section-collapsible__edit-label) {
  display: none !important;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__edit-button {
  --button-background: transparent;
  --button-border-width: 0;
  --button-border: transparent;
  --button-text: var(--color-text, #1A1A1A);
  --button-hover-background: var(--lavender-300, #e6dcff);
  --button-hover-border: transparent;
  --button-hover-text: var(--color-text, #1A1A1A);
  --button-font-size-sm: clamp(0.9rem, 2.1vw, 1rem);
  --button-font-weight: var(--font-weight-regular, 400);
  --button-icon-size-sm: 0.875rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon, .social-pane__edit-button .profile-section-collapsible__edit-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  line-height: 0;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon svg, .social-pane__edit-button .profile-section-collapsible__edit-icon svg) {
  width: 0.875rem;
  height: 0.875rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon svg path, .social-pane__edit-button .profile-section-collapsible__edit-icon svg path) {
  fill: var(--color-text, #1A1A1A);
  stroke: none;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-actions {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.938rem);
  padding: var(--spacing-md, 1rem) 0 0;
  margin: var(--spacing-md, 1rem) auto 0;
  box-sizing: border-box;
  width: 100%;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-actions > solid-ui-button {
  flex: 0 0 auto;
  width: 10.8rem;
  min-width: 8.5rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add::part(button) {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-base, 1.5);
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friends-header-actions--standalone {
  flex-wrap: wrap;
  gap: var(--spacing-2xs, 0.625rem);
  padding-top: 0.35rem;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane .social-layout, .social-pane .social-primary, .social-layout, .social-primary) {
  display: block;
}

:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friends-grid,
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-friends-grid {
  display: block;
}

:is(.social-pane-host, .social-pane)[data-input-mode='touch'] {
  --profile-interactive-cursor: auto;
}

:is(.social-pane-host, .social-pane)[data-input-mode='pointer'] {
  --profile-interactive-cursor: pointer;
}

@media (max-width: 600px) {
  .social-pane__header-content {
    display: grid;
    grid-template-columns: 4.375rem minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--spacing-md, 1rem);
    row-gap: 0.25rem;
    padding: 1rem 1rem 0;
  }

  .social-pane__header-media {
    display: contents;
  }

  .social-pane__header-details {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
  }

  .social-pane__header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    justify-content: flex-end;
    width: auto;
    gap: var(--spacing-2xs, 0.3125rem);
    margin-left: 0;
  }

  .social-pane__header-actions--friend {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    margin-top: 0.125rem;
  }

  .social-pane__header-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .social-pane__header-name,
  .social-pane__header-job-org,
  .social-pane__header-location {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  .social-pane__header-stats {
    width: 100%;
    justify-content: flex-start;
    align-self: flex-start;
    gap: var(--spacing-xs, 0.5rem);
    margin-top: -0.4375rem;
  }

  .social-profile-links {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-xxxs, 0.2rem);
    justify-items: start;
    padding-left: 0;
    margin-top: -0.375rem;
  }

  .social-pane .social-primary__tabs {
    margin-top: -0.5rem;
  }

  .social-pane__link-button {
    justify-self: start;
    padding-left: 0;
    padding-right: 0;
  }

  .social-pane__link-button > a {
    font-size: var(--font-size-sm, 0.875rem);
    text-align: left;
  }

  .social-pane__dialog-field-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-pane__header-hero,
  .social-pane__header-hero-icon {
    grid-column: 1;
    grid-row: 1;
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1 / 1;
  }

  .social-pane__header-name {
    font-size: var(--font-size-xl, 1.375rem);
    line-height: 1.15;
  }

  .social-pane__header-job-org {
    font-size: var(--font-size-md, 1rem);
    line-height: 1.25;
  }

  .social-pane .social-friend-pronouns {
    font-size: 0.6875rem;
  }

  .social-pane__header-location,
  .social-pane__header-stat,
  .social-pane .social-friend-location {
    font-size: var(--font-size-xxs, 0.75rem);
  }

  .social-pane__friend-action {
    --button-padding-sm: var(--spacing-xxxs, 0.2rem) var(--spacing-xxs-old, 0.3rem);
    --button-font-size-sm: var(--font-size-xs, 0.813rem);
    --button-border-radius-sm: var(--border-radius-base, 0.3125rem);
  }

  .social-pane__edit-button-label,
  .social-pane__edit-button .profile-section-collapsible__edit-label {
    display: none !important;
  }

  .social-pane__edit-button {
    --button-background: transparent;
    --button-border-width: 0;
    --button-border: transparent;
    --button-background: transparent;
    --button-text: var(--color-text, #1A1A1A);
    --button-hover-background: var(--lavender-300, #e6dcff);
    --button-hover-border: transparent;
    --button-hover-text: var(--color-text, #1A1A1A);
    --button-font-size-sm: clamp(0.9rem, 2.1vw, 1rem);
    --button-font-weight: var(--font-weight-regular, 400);
    --button-icon-size-sm: 0.875rem;
  }

  .social-pane__edit-button-icon,
  .social-pane__edit-button .profile-section-collapsible__edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 0;
  }

  .social-pane__edit-button-icon svg,
  .social-pane__edit-button .profile-section-collapsible__edit-icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .social-pane__edit-button-icon svg path,
  .social-pane__edit-button .profile-section-collapsible__edit-icon svg path {
    fill: var(--color-text, #1A1A1A);
    stroke: none;
  }

  .social-pane__dialog-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.938rem);
    padding: var(--spacing-md, 1rem) 0 0;
    margin: var(--spacing-md, 1rem) auto 0;
    box-sizing: border-box;
    width: 100%;
  }

  .social-pane__dialog-actions > solid-ui-button {
    flex: 0 0 auto;
    width: 10.8rem;
    min-width: 8.5rem;
  }

  .social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add::part(button) {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-base, 1.5);
  }

  .social-pane .social-friends-header-actions--standalone {
    flex-wrap: wrap;
    gap: var(--spacing-2xs, 0.625rem);
    padding-top: 0.35rem;
  }

  .social-pane .social-layout,
  .social-pane .social-primary {
    display: block;
  }

  .social-pane .social-friends-grid {
    display: block;
  }

  .social-pane .social-friends-grid > tr,
  .social-pane .social-friends-grid > tbody > tr {
    display: table;
    width: 100%;
    margin-bottom: var(--spacing-xs, 0.75rem);
  }

  .social-pane .social-friends-grid > tr:last-child,
  .social-pane .social-friends-grid > tbody > tr:last-child {
    margin-bottom: 0;
  }

  .social-pane .social-main {
    width: 100%;
  }
}

.human-readable-pane {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.human-readable-pane__container {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.human-readable-pane__frame {
  display: block;
  border: 1px solid;
  padding: 1rem;
  height: var(--human-readable-pane-height, 30rem);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  resize: both;
  overflow: auto;
}

.human-readable-pane__frame--iframe {
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 18rem;
  background: var(--color-background, white);
}

.human-readable-pane__frame--markdown {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.human-readable-pane__frame--plain-text {
  font-family: monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.human-readable-pane__frame--markdown > * {
  max-width: 100%;
  box-sizing: border-box;
}

.human-readable-pane__frame--markdown img,
.human-readable-pane__frame--markdown video,
.human-readable-pane__frame--markdown canvas,
.human-readable-pane__frame--markdown iframe {
  max-width: 100%;
  height: auto;
}

.human-readable-pane__frame--markdown pre,
.human-readable-pane__frame--markdown code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.human-readable-pane__frame--markdown pre {
  white-space: pre-wrap;
}

.human-readable-pane__frame--markdown table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.human-readable-pane__frame--markdown th,
.human-readable-pane__frame--markdown td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame {
  padding: 0.75rem;
  resize: none;
  min-width: 0;
}

.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--markdown,
.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--plain-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--iframe {
  width: 100%;
  max-width: 100%;
  min-height: 16rem;
  height: min(var(--human-readable-pane-height, 30rem), 75vh);
}

@media (max-width: 576px) {
  .human-readable-pane__frame {
    padding: 0.75rem;
    resize: none;
    min-width: 0;
  }

  .human-readable-pane__frame--markdown,
  .human-readable-pane__frame--plain-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .human-readable-pane__frame--iframe {
    width: 100%;
    max-width: 100%;
    min-height: 16rem;
    height: min(var(--human-readable-pane-height, 30rem), 75vh);
  }
}

.data-content-pane__literal {
  white-space: pre-wrap;
}

div.data-content-pane {
  border-top: solid 1px var(--color-data-pane-border-top, black);
  border-left: solid 1px var(--color-data-pane-border-top, black);
  border-bottom: solid 1px var(--color-data-pane-border-side, #777);
  border-right: solid 1px var(--color-data-pane-border-side, #777);
  padding: var(--spacing-base, 0.5rem);
  margin-top: var(--spacing-base, 0.5rem);
  margin-bottom: var(--spacing-base, 0.5rem);
}

div.data-content-pane table.data-content-pane__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

div.data-content-pane table.data-content-pane__table--root {
  table-layout: auto;
}

div.data-content-pane .data-content-pane__row--root {
  display: flex;
  align-items: flex-start;
}

div.data-content-pane .data-content-pane__row--root > td {
  vertical-align: top;
}

div.data-content-pane .data-content-pane__subject-cell {
  flex: 0 0 auto;
  width: clamp(7rem, 12%, 10rem);
  padding-right: 0.8rem;
}

div.data-content-pane .data-content-pane__details-cell {
  flex: 0 1 auto;
  min-width: 0;
}

div.data-content-pane .data-content-pane__subject-cell,
div.data-content-pane td.data-content-pane__predicate-cell,
div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell),
div.data-content-pane .data-content-pane__subject-cell a,
div.data-content-pane td.data-content-pane__predicate-cell a,
div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) a {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

div.data-content-pane table.data-content-pane__table--property {
  table-layout: auto;
  width: auto;
  max-width: 100%;
}

.data-content-pane__nested-formula {
  border-top: solid 1px var(--color-data-pane-border-top, black);
  border-left: solid 1px var(--color-data-pane-border-top, black);
  border-bottom: solid 1px var(--color-data-pane-border-side, #777);
  border-right: solid 1px var(--color-data-pane-border-side, #777);
  padding: var(--spacing-base, 0.5rem);
  border-radius: var(--border-radius-md, 0.5rem);
}

div.data-content-pane td {
  padding-left: var(--spacing-xxxs, 0.2rem);
  padding-top: var(--spacing-small, 0.1rem);
  padding-right: var(--spacing-xxxs, 0.2rem);
  padding-bottom: 0.05rem;
  vertical-align: top;
}

div.data-content-pane table.data-content-pane__table--property td {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

div.data-content-pane tr {
  margin-bottom: var(--spacing-2xs, 0.625rem);
  padding-top: var(--spacing-small, 0.1rem);
  padding-bottom: var(--spacing-small, 0.1rem);
}

.data-content-pane a {
  color: var(--color-text-link, #3b5998);
  text-decoration: none;
  font-weight: bold;
}

.data-content-pane a:link {
  color: var(--color-text-link, #3b5998);
  text-decoration: none;
  font-weight: bold;
}

.data-content-pane a:visited {
  color: var(--color-text-link-visited, #3b5998);
  text-decoration: none;
  font-weight: bold;
}

.data-content-pane a:hover {
  color: var(--color-text-link-hover, #3b5998);
  text-decoration: underline;
  font-weight: bold;
}

.data-content-pane a:active {
  color: var(--color-text-link-active, #888);
  text-decoration: none;
}

.data-content-pane.embeddedText {
  white-space: pre-wrap;
}

div.data-content-pane td.data-content-pane__predicate-cell {
  min-width: 8.5rem;
  width: clamp(8.5rem, 18vw, 12rem);
  max-width: 12rem;
  padding-right: var(--spacing-base, 0.5rem);
}

div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
  padding-left: var(--spacing-xxs, 0.3125rem);
}

div.data-content-pane td.data-content-pane__predicate-cell a {
  color: var(--color-text-muted, #444);
}

.data-content-pane__row--even {
  background-color: var(--color-background-row-alternate, #f0f0f0);
}

.data-content-pane__row--odd {
  background-color: var(--color-background-row-default, white);
}

.data-content-pane__row--top-aligned {
  vertical-align: top;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.data-content-pane__nested-table--light {
  background-color: var(--color-background-row-default, white);
}

.data-content-pane__nested-table--dark {
  background-color: var(--color-background-row-alternate, #f0f0f0);
}

div.data-content-pane[data-layout='mobile'] .data-content-pane__row--root {
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--spacing-xs, 0.75rem);
}

div.data-content-pane[data-layout='mobile'] .data-content-pane__subject-cell {
  flex: 0 0 40%;
  width: 40%;
  max-width: 40%;
  box-sizing: border-box;
  padding-right: var(--spacing-xs, 0.75rem);
  padding-bottom: 0;
}

div.data-content-pane[data-layout='mobile'] .data-content-pane__details-cell {
  flex: 0 0 60%;
  width: 60%;
  max-width: 60%;
  min-width: 0;
  box-sizing: border-box;
}

div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody > tr,
div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tr {
  margin-bottom: 0;
}

div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned + .data-content-pane__row--top-aligned {
  margin-top: 0;
}

div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned {
  display: block;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property,
div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody {
  display: block;
  width: 100%;
}

div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td.data-content-pane__predicate-cell {
  width: 100%;
  min-width: 0;
  padding-bottom: 0.1rem;
}

div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td:not(.data-content-pane__predicate-cell) {
  padding-top: 0;
  padding-left: 0.85rem;
}

@media (max-width: 700px) {
  div.data-content-pane .data-content-pane__row--root {
    display: flex;
    align-items: flex-start;
  }

  div.data-content-pane .data-content-pane__subject-cell {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
    padding-right: var(--spacing-xs, 0.75rem);
    padding-bottom: 0;
    box-sizing: border-box;
  }

  div.data-content-pane .data-content-pane__details-cell {
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
    box-sizing: border-box;
  }

  div.data-content-pane .data-content-pane__row--top-aligned {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  div.data-content-pane .data-content-pane__row--top-aligned > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  div.data-content-pane .data-content-pane__row--top-aligned > td.data-content-pane__predicate-cell {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding-bottom: var(--spacing-small, 0.1rem);
  }

  div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
    padding-top: 0;
    padding-left: 0.85rem;
  }
}

.n3-pane {
	padding: 1rem;
	border-top: solid 1px var(--color-data-pane-border-top, black);
	border-left: solid 1px var(--color-data-pane-border-top, black);
	border-bottom: solid 1px var(--color-data-pane-border-side, #777);
	border-right: solid 1px var(--color-data-pane-border-side, #777);
	color: var(--color-text-blue, #004);
	box-sizing: border-box;
}

.n3-pane__source {
	overflow-x: auto;
	max-width: 100%;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 120%;
	margin: 0;
	white-space: pre;
}

.n3-pane__line {
	white-space: pre;
}

.n3-pane[data-layout='mobile'] .n3-pane__source {
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

.n3-pane[data-layout='mobile'] .n3-pane__line {
	white-space: pre-wrap;
	padding-left: var(--n3-indent, 0);
	text-indent: calc(-1 * var(--n3-indent, 0));
}

@media (max-width: 576px) {
	.n3-pane__source {
		overflow-wrap: anywhere;
		word-break: break-word;
		white-space: normal;
	}

	.n3-pane__line {
		white-space: pre-wrap;
		padding-left: var(--n3-indent, 0);
		text-indent: calc(-1 * var(--n3-indent, 0));
	}
}
.rdfxml-pane {
	padding: 1rem;
	border-top: solid 2px var(--color-data-pane-border-top, black);
	border-left: solid 2px var(--color-data-pane-border-top, black);
	border-bottom: solid 2px var(--color-data-pane-border-side, #777);
	border-right: solid 2px var(--color-data-pane-border-side, #777);
	color: var(--color-text-brown, #440);
	box-sizing: border-box;
}

.rdfxml-pane__source {
	overflow-x: auto;
	max-width: 100%;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 120%;
	margin: 0;
	white-space: pre;
}

.rdfxml-pane__line {
	display: grid;
	grid-template-columns: var(--rdfxml-indent, 0) minmax(max-content, auto);
	align-items: start;
}

.rdfxml-pane__line-indent {
	display: block;
	width: var(--rdfxml-indent, 0);
}

.rdfxml-pane__line-content {
	white-space: pre;
}

.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__source {
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line {
	grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
}

.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line-content {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}

@media (max-width: 576px) {
	.rdfxml-pane__source {
		overflow-wrap: anywhere;
		word-break: break-word;
		white-space: normal;
	}

	.rdfxml-pane__line {
		grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
	}

	.rdfxml-pane__line-content {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		word-break: break-word;
		min-width: 0;
	}
}

.formPane a {
  color: var(--color-text-link, #3b5998);
  text-decoration: none;
}

.formPane a:link {
  color: var(--color-text-link, #3b5998);
  text-decoration: none;
}

.formPane a:visited {
  color: var(--color-text-link-visited, #3b5998);
  text-decoration: none;
}

.formPane a:hover {
  color: var(--color-text-link-hover, #3b5998);
  font-weight: bold;
}

.formPane a:active {
  color: var(--color-text-link-active, #888);
  text-decoration: none;
}

.formPane__message,
.formPaneMessage {
  color: #666;
  margin: var(--spacing-xs, 0.5em) 0;
  padding: var(--spacing-xs, 0.35em) var(--spacing-xs, 0.5em);
}

.formPane__message--info {
  background-color: var(--color-main-block-bg, #eee);
}

.formPane__message--error {
  background-color: var(--color-log-error-bg, #fee);
}

.formPane__editButton {
  margin-left: auto;
  align-self: center;
  padding: var(--spacing-xs, 0.5rem);
  border: .5rem solid white;
  font-size: 100%;
  float: none;
}

.formPane .formPane__mobileTextareaValue > div {
  display: block;
  min-width: 0;
  position: relative;
}

.formPane .formPane__mobileTextareaValue > div > textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.formPane .formPane__mobileTextareaValue > div > button[type='button'] {
  float: none !important;
  position: absolute;
  right: 0;
  top: 0;
}

.formPane[data-layout='mobile'] .formPane__mobileTextareaRow {
  flex-direction: column !important;
  align-items: stretch;
}

.formPane[data-layout='mobile'] .formPane__mobileTextareaLabel {
  width: auto !important;
  padding-bottom: 0;
}

.formPane[data-layout='mobile'] .formPane__mobileTextareaValue {
  box-sizing: border-box;
  min-width: 0;
  padding-right: var(--spacing-sm, 0.75rem);
  width: 100%;
}

.formPane[data-layout='mobile'] .formPane__mobileTextareaValue textarea {
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 960px) {
  .formPane .formPane__mobileTextareaRow {
    flex-direction: column !important;
    align-items: stretch;
  }

  .formPane .formPane__mobileTextareaLabel {
    width: auto !important;
    padding-bottom: 0;
  }

  .formPane .formPane__mobileTextareaValue {
    box-sizing: border-box;
    min-width: 0;
    padding-right: var(--spacing-sm, 0.75rem);
    width: 100%;
  }

  .formPane .formPane__mobileTextareaValue textarea {
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    width: 100%;
  }
}

.defaultPane .bottom-border {
	border: 0.2rem solid transparent;
	width: 100%;
}

.defaultPane .bottom-border-active {
	cursor: copy;
	border: 0.2rem solid;
	border-color: var(--color-bottom-border-highlight, rgb(100%, 65%, 0%));
}

.defaultPane {
	--default-pane-predicate-column: 16rem;
	--default-pane-object-indent: 1.75rem;
}

.defaultPane > tr {
	display: grid;
	grid-template-columns: minmax(0, var(--default-pane-predicate-column)) minmax(0, 1fr);
	align-items: flex-start;
}

.defaultPane > tr > td.pred {
	grid-column: 1;
	display: flex;
	align-items: flex-start;
	padding-left: 0 !important;
	box-sizing: border-box;
	min-width: 0;
}

.defaultPane > tr > td.pred > .labelTD {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.defaultPane > tr > td.pred > .iconTD {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.defaultPane > tr > td.obj {
	grid-column: 2;
	min-width: 0;
	box-sizing: border-box;
	align-self: start;
}

.defaultPane > tr > td[colspan='2'] {
	grid-column: 1 / -1;
}

.defaultPane[data-layout='mobile'] > tr {
	grid-template-columns: minmax(0, 1fr);
}

.defaultPane[data-layout='mobile'] > tr > td.pred,
.defaultPane[data-layout='mobile'] > tr > td.obj {
	display: block;
	grid-column: 1;
	width: 100%;
	box-sizing: border-box;
}

.defaultPane[data-layout='mobile'] > tr > td.pred {
	padding-bottom: var(--spacing-small, 0.1rem);
}

.defaultPane[data-layout='mobile'] > tr > td.obj {
	padding-left: var(--default-pane-object-indent) !important;
}

@media (max-width: 700px) {
	.defaultPane > tr {
		grid-template-columns: minmax(0, 1fr);
	}

	.defaultPane > tr > td.pred,
	.defaultPane > tr > td.obj {
		display: block;
		grid-column: 1;
		width: 100%;
		box-sizing: border-box;
	}

	.defaultPane > tr > td.pred {
		padding-bottom: var(--spacing-small, 0.1rem);
	}

	.defaultPane > tr > td.obj {
		padding-left: var(--default-pane-object-indent) !important;
	}
}

.internalPaneContent {
  background-color: #ddddff;
  padding: var(--spacing-xs, 0.5em);
  border-radius: 1rem;
}

.internalPaneControls {
  width: 100%;
  margin: var(--spacing-sm, 1em);
}

.internalPaneDeleteButton {
  height: var(--icon-base, 2em);
}

.menu-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
}

.app-nav.mobile-hidden .menu-content,
.app-nav.mobile-visible .menu-content {
  padding-top: 0.75rem;
}

.menu-footer {
  width: 100%;
  padding: 1rem;
  border-top: 1px solid var(--color-border, #d1d1d1);
  font-size: 0.875rem;
  color: var(--color-text-muted, #555);
  line-height: 1.4;
  background: inherit;
}

.app-nav.collapsed .menu-footer {
  display: none;
  text-align: center;
  padding: 0.75rem 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs, 0.625rem);
  border: 0;
  border-radius: var(--border-radius-sm, 0.2rem);
  padding: 0.5rem var(--spacing-xs, 0.75rem);
  background: transparent;
  color: var(--color-text-heading, #000000);
  text-decoration: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.menu-toggle-icon {
  width: 30px;
  height: 30px;
}

.menu-item-icon {
  width: var(--icon-xxs, 1rem);
  height: var(--icon-xxs, 1rem);
  flex: 0 0 var(--icon-xxs, 1rem);
  object-fit: contain;
}

.menu-item-label {
  min-width: 0;
}

.menu-item:hover,
.menu-item:focus {
  background: var(--color-header-menu-item-hover, #e6dcff);
}

.menu-item-active,
.menu-item-active:hover,
.menu-item-active:focus {
  background: var(--color-header-menu-item-selected, #cbb9ff);
  color: var(--color-header-menu-item-text-selected, #7c4cff);
}

.menu-toggle {
  position: fixed;
  top: 0.5rem;
  left: 1rem;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: var(--icon-md, 2.5rem);
  height: var(--icon-md, 2.5rem);
  padding: 0 0.625rem;
  border: 1px solid var(--color-border);
  background: var(--color-menu-bg, #ffffff);
  color: var(--color-text);
  border-radius: var(--border-radius-sm, 0.2rem);
  margin: 0;
}

.menu-toggle-label {
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
}

.app-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(18rem, 320px);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--color-menu-bg, #ffffff);
  border-right: 1px solid var(--color-border);
  z-index: 10;
}

.app-nav.mobile-hidden,
.app-nav.mobile-visible {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(80vw, 320px);
  height: 100vh;
  min-height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background: var(--color-menu-bg, #ffffff);
  border-right: none;
  box-shadow: none;
  overflow: hidden;
  padding-top: 3.75rem;
}

.app-nav.mobile-hidden .menu-content,
.app-nav.mobile-visible .menu-content {
  flex: 1;
  min-height: 0;
}

.app-nav.mobile-visible {
  transform: translateX(0);
  visibility: visible;
  background: var(--color-menu-bg, #ffffff);
}

.menu-header {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: flex-start;
  background-color: #42345a !important;
  color: #ffffff;
  font-weight: 600;
  min-height: 3.75rem;
  height: 3.75rem;
  box-sizing: border-box;
  width: 100%;
  z-index: 1000;
  border-right: none;
  box-shadow: none;
}

.app-nav.mobile-hidden .menu-header,
.app-nav.mobile-visible .menu-header {
  display: flex;
}

.menu-header-title {
  font-size: 1.25rem;
  color: #ffffff;
}

.menu-close {
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  padding-left: 1.25rem;
  line-height: 1;
}

.menu-close:hover,
.menu-close:focus {
  opacity: 0.85;
}

.app-nav.collapsed {
  width: 4.5rem;
  min-width: 4.5rem;
}

.app-nav.collapsed .menu-content {
  gap: 0.25rem;
  align-items: center;
}

.app-nav.collapsed .menu-item {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.app-nav.collapsed .menu-item-label {
  display: none;
}

.menu-collapse {
  position: fixed;
  left: 3rem;
  bottom: 8rem;
  z-index: 320;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(124,77,255,0.12);
}

@media (max-width: 768px) {
  .menu-collapse {
    display: none;
  }
}
:root{--solid-ui-color-primary:#7c4dff;--solid-ui-color-tertiary:#083575;--solid-ui-color-white:#fff;--solid-ui-color-error:#b00020;--solid-ui-color-gray-100:#f3f4f6;--solid-ui-color-gray-400:#99a1af;--solid-ui-color-gray-500:#6a7282;--solid-ui-color-gray-600:#4a5565;--solid-ui-color-gray-700:#364153;--solid-ui-color-gray-800:#101828;--solid-ui-color-slate-50:#f8fafc;--solid-ui-color-slate-200:#e2e8f0;--solid-ui-color-slate-400:#90a1b9;--solid-ui-color-body-grey:#666;--solid-ui-font-size-sm:.875rem;--solid-ui-font-size-md:1rem;--solid-ui-font-size-lg:1.125rem;--solid-ui-font-size-xl:1.25rem;--solid-ui-font-size-2xl:1.5rem;--solid-ui-clickable-area:42px;--solid-color-gray-100:#f8fafc;--solid-color-gray-200:#cbd5e1;--solid-color-primary:#7c4dff;--solid-color-primary-foreground:#fff;--solid-color-primary-hover:#6a3de8}

/*
** Light Theme (Default)
** Default color scheme for SolidOS
*/

:root {
  /* New Design: Colors (possibly change to primary secondary etc for now add here  */
  /* Adding used for comment so we can decide later */
  --blue-900: #083575;
  --gray-50: #F9FAFB; /* Used for: background of dialog buttons */
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB; /* Used for: border of sections */
  --gray-300: #D1D5DC; /* Used for: text */
  --gray-400: #99A1AF; /* Used for: input borders */
  --gray-500: #6A7282; /* Used for: text */
  --gray-600: #4A5565; /* Used for: text  */
  --gray-700: #364153; /* Used for: text */
  --gray-800: #1E2939; /* Used for: text  */
  --gray-900: #101828; /* Used for: text  */
  --purple-500: #AD46FF;
  --red-600: #B00020; /* Used for: error text */
  --slate-50: #F8FAFC;
  --slate-200: #E2E8F0; /* Used for: border of sections */
  --slate-400: #90A1B9; /* Used for: edit dialog cancel */
  --slate-500: #62748E; /* Used for: text */
  --slate-700: #314158; /* Used for: side menu bar text */
  --slate-800: #1D293D; /* Used for: text and top header background */
  --slate-900: #0F172B; /* Used for: text  */
  --utility-colours-body-grey: #666; /* used in header drop down behind the picture */
  --lavender-200: #E4DBFE; /* background of Follow button  and side menu active button */
  --lavender-300: #e6dcff;
  --lavender-400: #cbb9ff;
  --lavender-500: #b295ff;
  --lavender-700: #9672ff;
  --lavender-900: #7c4cff;
  --grey-purple-200: #d8d6db;
  --grey-purple-300: #b1acb7;
  --grey-purple-500: #878192;
  --grey-purple-700: #5e546d;
  --grey-purple-900: #332746; /* Used for: header background */
  --orange-200: #ffefdd;
  --orange-300: #ffdeba;
  --orange-400: #ffce97;
  --orange-500: #ffbd74;
  --orange-600: #ffad4f;
  --pink-500: #ffdde6;
  --pink-600: #ffbbcd;
  --pink-700: #ff98b3;
  --pink-800: #ff769a;
  --pink-900: #ff5180;
  --yellow-700: #A65F00;
  --black: #000;  /* Used for: text heading */
  --white: #FFF;


  /* Button colors */
  --color-surface-action: var(--color-primary, #7C4DFF);
  --color-surface-action-hover: #6d3cf2;
  --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
  --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
  --color-surface-overlay: var(--white, #FFF);
  --color-surface-overlay-header: var(--slate-50, #F8FAFC);
  --color-surface-tertiary: var(--gray-50, #F9FAFB);
  --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
  --color-surface-chip: var(--gray-100, #F3F4F6);
  --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
  --color-surface-subtle: rgba(15, 23, 43, 0.04);
  --color-text-on-action: var(--white, #FFF);
  --color-border-muted: var(--gray-300, #D1D5DC);
  --color-border-action: var(--color-primary, #7C4DFF);
  --color-focus-ring: var(--color-primary, #7C4DFF);
  --color-focus-gap: var(--white, #FFF);
  --dialog-cancel-button-background: transparent;
  --dialog-cancel-button-text: var(--gray-800, #1E2939);
  --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
  --dialog-cancel-button-hover-background: var(--blue-900, #083575);
  --dialog-cancel-button-hover-text: var(--white, #FFF);
  --dialog-cancel-button-hover-border: var(--blue-900, #083575);
 
  /* Error dialog box colors */
  --dialog-error-background: var(--pink-500, #ffdde6);
  --dialog-error-border: var(--pink-700, #ff98b3);
  --dialog-error-text: var(--red-600, #B00020);
  
  /* Background and Text */
  --color-background-old: #FFFFFF; /* White */
  --color-background: #F8F9FB; /* Light grey for overall background */
  --color-background-row-default: white;
  --color-background-row-alternate: #f0f0f0;
  --color-text: #1A1A1A; /* Used in login button */
  --color-text-ui: var(--gray-100, #F3F4F6);
  --color-text-primary: var(--gray-700, #364153); /* new design */
  --color-text-control: var(--slate-700, #314158);
  --color-text-secondary-old: #666;
  --color-text-secondary: var(--gray-600, #4A5565);
  --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
  --color-text-subheading: var(--gray-900, #101828); /* new design */
  --color-text-overlay: var(--gray-800, #1E2939);
  --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
  --color-text-strong: var(--slate-900, #0F172B); /* new design */
  --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
  --color-text-detail: var(--slate-500, #62748E);
  --color-text-empty-state: var(--gray-400, #99A1AF);
  --color-icon-muted: var(--slate-400, #90A1B9);
  --color-text-light: #aaa;
  --color-text-link: #3B5998;
  --color-text-link-visited: #3B5998;
  --color-text-link-hover: #3B5998;
  --color-text-link-active: #888;
  --color-text-answer: #00c;
  --color-text-muted: #444;
  --color-text-dark-gray: #202;
  --color-text-blue: #004;
  --color-text-brown: #440;
  
  /* Header */
  --color-header-row-bg: var(--grey-purple-900, #332746);
  --color-header-text: var(--white, #fff);
  --color-header-menu-separator-line: var(--slate-200, #E2E8F0);
  --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
  --color-header-menu-item-selected: var(--lavender-400, #cbb9ff);
  --color-header-menu-loggedin-bg: var(--grey-purple-700, #5e546d);
  --color-header-button-text: var(--slate-900, #0F172B);
  --color-header-button-detail-text: var(--gray-400, #99A1AF);
  --color-header-shadow: 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19);
  
  /* Borders */
  --color-border: var(--gray-200, #E5E7EB); /* Used in login button */
  --color-border-lighter: var(--slate-200, #E2E8F0);
  --color-border-dark: #777;
  --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
  --color-border-light: #aaa;
  --color-border-subtle: var(--gray-100, #F3F4F6);
  --color-border-pale: #eee;
  --color-border-accent: #88c;
  --color-border-button: var(--gray-300, #D1D5DC);
  --color-border-button-hover: var(--gray-400, #99A1AF);
  
  /* Status Colors */
  --color-selected-bg: var(--lavender-300, #e6dcff);
  --color-warning: var(--red-600, #B00020);
  --color-success-bg: #dfd;
  --color-success-border: green;
  --color-failure-bg: white;
  --color-failure-border: var(--red-600, #B00020);
  
  /* Info and Alert Colors */
  --color-info-bg: #ccccff;
  --color-info-border: #3399ff;
  --color-alert-bg: #ffffdd;
  --color-alert-border: yellow;
  --color-fetch-bg: #eeffee;
  --color-request-bg: yellow;
  --color-error-bg: white;
  --color-error-notice-bg: #fee;
  --color-unparseable-bg: #ffcc00;
  
  /* Component Colors */
  --color-container-border: black;
  --color-iframe-bg: white;
  --color-main-block-bg: #fff;
  --color-nav-block-bg: #eee;
  --color-nav-block-border: gray;
  --color-category-bg: #f8fff8;
  --color-category-border: #777777;
  --color-category-class-bg: #efe;
  --color-category-class-border: green;
  --color-pubs-pane-bg: #F2F6DA;
  --color-pubs-pane-border: #777777;
  --color-cv-pane-bg: LightSkyBlue;
  
  /* Data Content Pane */
  --color-data-pane-border-top: black;
  --color-data-pane-border-side: #777;
  --color-table-header-bg: #ddf;
  --color-table-result-bg: #fff;
  --color-table-border-dark: #777;
  
  /* Notification Colors */
  --color-log-normal: black;
  --color-log-info: black;
  --color-log-warn: black;
  --color-log-warn-bg: #ffd;
  --color-log-error: black;
  --color-log-error-bg: #fdd;
  --color-log-message: green;
  --color-log-debug: black;
  --color-log-debug-bg: #ddf;
  
  /* Suggestion List */
  --color-suggestion-bg: white;
  --color-suggestion-border: navy;
  --color-suggestion-link: navy;
  --color-suggestion-selected-bg: navy;
  --color-suggestion-selected-text: white;
  
  /* Photo Pane */
  --color-photo-border: #AAAAAA;
  --color-photo-tag-highlight: #DDEEFF;
  --color-photo-tag-highlight-border: #DDBB99;
  --color-photo-thumb-border: #CCCCCC;
  
  /* Menu and Tab Colors */
  --color-menu-bg: #FFFFFF;
  --color-menu-item-text: #654d6c;
  --color-menu-item-active: #D1C6DA; /* can be replaced with --color-header-menu-item-selected? */
  --color-view-tab-bg: #fff;
  --color-view-window-bg: #ccc;
  --color-query-select-bg: #ccc;
  --color-tab-inactive-bg: #eee;
  --color-tab-inactive-border: #ddd;
  --color-tab-inactive-border-light: #aaa;
  --color-tab-inactive-text: #99f;
  --color-tab-active-bg: #ccc;
  --color-tab-active-border: #ddd;
  --color-tab-active-border-light: #aaa;
  --color-tab-active-text: #22f;
  
  /* Special Highlights */
  --color-source-highlight: yellow;
  --color-hover-visibility: visible;
  --color-hidden-visibility: hidden;
  --color-mild-notice-bg: #ffe;
  --color-bottom-border-highlight: rgb(100%,65%,0%);
  --color-col-close: #aaa;
  --color-sort-arrow: #aaa;
  --color-pending-edit: #bbb;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base-old: 100%;
  --font-size-base: 1rem;      /* 16px */
  --font-size-strong: 120%;
  --font-weight-normal: normal;
  --font-weight-md: 500; /* New design uses 500 for body text was normal */
  --font-weight-bold-old: bold;
  --font-weight-bold: 600; /* New design uses 600 for headings was 700 */
  --font-weight-xbold: 700; /* New design uses 700 for strong text was bold */
  --line-height-base: 1.5;
  --line-height-tight: 1.4;
  --line-height-loose: 1.6;
  --letter-spacing-wide: 0.025em;
  --font-size-xxs: 0.75rem; /* 12px */
  --font-size-xs: 0.813rem; /* 13px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem;     /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl-old: 1.25rem; /* 20px */
  --font-size-xl: 1.375rem;     /* 22px */
  --font-size-xxl: 1.75rem;    /* 28px */

  /* Spacing and Sizing */
  --spacing-tiny: 0.05rem;
  --spacing-small: 0.1rem;
  --spacing-xxxs: 0.2rem; /* was em */
  --spacing-xxs-old: 0.3rem; /* was em */
  --spacing-xxs: 0.3125rem;  /* 5px */
  --spacing-2xs: 0.625rem; /* 10px new design uses this */
  --spacing-xs-old: 0.5rem;
  --spacing-xs: 0.75rem;   /* 12px new design uses this */
  --spacing-sm-old: 0.75rem; /* was em */
  --spacing-sm: 0.938rem;  /* 15px new design uses this */
  --spacing-btn: 0.7rem; /* was em */
  --spacing-base: 0.5rem; /* was em */
  --spacing-md-old: 1rem; /* was em */
  --spacing-md: 1.25rem;   /* 20px new design uses this */
  --spacing-lg-old: 1.5rem; /* was em */
  --spacing-lg: 1.5625rem;   /* 25px new design uses this */
  --spacing-xl: 2rem; /* was em */
  --spacing-1xl: 2.5rem; /* 40px new design uses this */
  --spacing-2xl: 3rem; /* was em */
  --border-width-xthin: 0.05rem; /* was em */
  --border-width-thin-old: 1px;
  --border-width-thin: 0.1rem; /* changed from 1px */
  --border-width-sm: 0.1rem; /* was em */
  --border-width-medium: 2px;
  --border-width-bold: 5px;
   

  --border-radius-xs: 0.1rem; /* 2px Extra small border radius was em */
  --border-radius-sm: 0.2rem; /* 4px Small border radius was em */
  --border-radius-base-old: 0.5em;
  --border-radius-base: 0.3125rem; /* 5px  Base border radius */
  --border-radius-md: 0.5rem; /* 8px Medium border radius */
  --border-radius-lg: 0.75rem; /* 12px Large border radius was em */
  --border-radius-full-old: 1em;
  --border-radius-full: 0.625rem;  /* 10px */

  
  /* icons */
  --icon-xxxs: 0.75rem; /* 12px new design uses this */
  --icon-xxs: 1rem; /* 16px new design uses this */
  --icon-xs: 1.5rem; /* 24px new design uses this */
  --icon-sm: 1.8rem; /* 28px new design uses this */
  --icon-base: 2rem; /* 32px new design uses this */
  --icon-md: 2.5rem; /* 40px new design uses this */
  --icon-xl: 3.1rem; /* 50px new design uses this */

  /* Primary/Accent Colors */
  --color-primary: #7C4DFF;
  --color-primary-alpha: rgba(124, 77, 255, 0.25);
  --color-primary-alpha-light: rgba(124, 77, 255, 0.1);
  --color-secondary: #0077B6;
  --color-accent: #FFD600;
  --color-error: #B00020; /* Used in login button */
  --color-success: #00C853;
  
  /* Card/Section Backgrounds */
  --color-section-bg-old: #F5F5F5; /* Light grey for outer sections */
  --color-section-bg: #FFFFFF; /* White for outer sections to match new design */

  --color-card-bg: #FFFFFF; /* White for inner cards */
  --color-zebra-stripe: rgba(0, 0, 0, 0.02);
  --color-hover-bg: rgba(0, 0, 0, 0.05);
  
  /* Shadows */
  --box-shadow: 0 2px 8px rgba(124,77,255,0.08);
  --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
  
  /* Accessibility */
  --min-touch-target: 44px;
  --focus-ring-width: 2px;
  --focus-indicator-width: 3px;
  --animation-duration: 0.2s;
  --animation-duration-slow: 0.3s;
  --min-font-size: 14px;
  --min-line-height: 1.4;
  --high-contrast-ratio: 7:1; /* WCAG AAA standard */
  
  /* Overlay and Modal */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-bg-muted: rgba(0, 0, 0, 0.3);
  --z-index-modal: 9999;
  --z-index-skip-links: 1000;
  
  /* Opacity */
  --opacity-disabled: 0.6;
  --opacity-input-disabled: 0.75;
  
  /* Layout Values */
  --max-width-readable: 65ch;
  --max-width-readable-wide: 70ch;
  --grid-min-column: 30em;
  
  /* Outline Offsets */
  --outline-offset-sm: 2px;
  
  /* Success Alpha */
  --color-success-alpha: rgba(0, 200, 83, 0.1);
}

/*
** ------SolidOS Themes------
** Theme variables for light and dark modes
*/
/* @import url('./themes/dark.css'); */


/*
** ------SolidOS Utility Classes------
** Reusable utility classes for layout, spacing, accessibility, and components
*/

/* ===========================================
   ACCESSIBILITY UTILITIES (HIGH PRIORITY)
   =========================================== */

/* Screen reader only content - hidden visually but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but can become visible on focus */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* Minimum touch target for mobile accessibility (WCAG 2.5.5) */
.min-touch-target {
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
}

/* Reduced motion support */
.reduced-motion {
  animation: none !important;
  transition: none !important;
}

/* Focus ring utility */
.focus-ring {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
}

.no-focus-ring {
  outline: none;
}

/* Skip links utility */

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -40px; /* was -100% */
  left: 6px; /* was 0 */
  z-index: 1000;
  padding: var(--spacing-sm) var(--spacing-md); /* was padding: 0.5rem 1rem; */
  border-radius: var(--border-radius-base); /* new */
  background: var(--color-primary); /* was background: var( --color-info-bg); */
  color: white; /* was var(--color-text); */
  text-decoration: none;
  font-weight: var(--font-weight-bold, 600);
  display: none;
  font-size: var(--font-size-base); /* new */
  line-height: 1; /* new */
}

.skip-link:focus {
  top: 6px; /* was top: 0; */
  display: none; /* in contact-pane this isn't there */
  outline: 2px solid white; /* new */
  outline-offset: 2px; /* new */
}

.skip-links a {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: var(--spacing-sm, 0.938rem);
  background: var(--color-primary, #7C4DFF);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius-base, 0.3125rem);
}

.skip-links a:focus {
  top: 6px;
}

/* ARIA live regions - for dynamic content announcements */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===========================================
   LAYOUT UTILITIES
   =========================================== */

.flex {
  display: flex;
}

.grid {
  display: grid;
}

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

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

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}
.inline-flex-column {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.inline-flex-row {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

/* ===========================================
   SPACING UTILITIES
   =========================================== */

/* Gap utilities */
.gap-xxs { gap: var(--spacing-xxs, 0.3125rem); } /* 5px */
.gap-2xs { gap: var(--spacing-2xs, 0.625rem); } /* 10px new design uses this */
.gap-xs { gap: var(--spacing-xs, 0.75rem); }
.gap-sm { gap: var(--spacing-sm, 0.938rem); }
.gap-md { gap: var(--spacing-md, 1.25rem); }
.gap-lg { gap: var(--spacing-lg, 1.5625rem); } /* 25px */
.gap-xl { gap: var(--spacing-xl, 2rem); }

/* Margin top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs, 0.75rem); }
.mt-sm { margin-top: var(--spacing-sm, 0.938rem); }
.mt-md { margin-top: var(--spacing-md, 1.25rem); }
.mt-lg { margin-top: var(--spacing-lg, 1.5625rem); }
.mt-xl { margin-top: var(--spacing-xl, 2rem); }

/* Margin bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs, 0.75rem); }
.mb-sm { margin-bottom: var(--spacing-sm, 0.938rem); }
.mb-md { margin-bottom: var(--spacing-md, 1.25rem); }
.mb-lg { margin-bottom: var(--spacing-lg, 1.5625rem); }
.mb-xl { margin-bottom: var(--spacing-xl, 2rem); }

/* Margin left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs, 0.75rem); }
.ml-sm { margin-left: var(--spacing-sm, 0.938rem); }
.ml-md { margin-left: var(--spacing-md, 1.25rem); }
.ml-lg { margin-left: var(--spacing-lg, 1.5625rem); }

/* Margin right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs, 0.75rem); }
.mr-sm { margin-right: var(--spacing-sm, 0.938rem); }
.mr-md { margin-right: var(--spacing-md, 1.25rem); }
.mr-lg { margin-right: var(--spacing-lg, 1.5625rem); }

/* Margin horizontal (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-xs { margin-left: var(--spacing-xs, 0.75rem); margin-right: var(--spacing-xs, 0.75rem); }
.mx-sm { margin-left: var(--spacing-sm, 0.938rem); margin-right: var(--spacing-sm, 0.938rem); }
.mx-md { margin-left: var(--spacing-md, 1.25rem); margin-right: var(--spacing-md, 1.25rem); }

/* Margin vertical (top + bottom) */
.my-xs { margin-top: var(--spacing-xs, 0.75rem); margin-bottom: var(--spacing-xs, 0.75rem); }
.my-sm { margin-top: var(--spacing-sm, 0.938rem); margin-bottom: var(--spacing-sm, 0.938rem); }
.my-md { margin-top: var(--spacing-md, 1.25rem); margin-bottom: var(--spacing-md, 1.25rem); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs, 0.75rem); }
.p-sm { padding: var(--spacing-sm, 0.938rem); }
.p-md { padding: var(--spacing-md, 1.25rem); }
.p-lg { padding: var(--spacing-lg, 1.5625rem); }
.p-xl { padding: var(--spacing-xl, 2rem); }

/* Padding top */
.pt-xs { padding-top: var(--spacing-xs, 0.75rem); }
.pt-sm { padding-top: var(--spacing-sm, 0.938rem); }
.pt-md { padding-top: var(--spacing-md, 1.25rem); }
.pt-lg { padding-top: var(--spacing-lg, 1.5625rem); }

/* Padding bottom */
.pb-xs { padding-bottom: var(--spacing-xs, 0.75rem); }
.pb-sm { padding-bottom: var(--spacing-sm, 0.938rem); }
.pb-md { padding-bottom: var(--spacing-md, 1.25rem); }
.pb-lg { padding-bottom: var(--spacing-lg, 1.5625rem); }

/* Padding horizontal */
.px-xs { padding-left: var(--spacing-xs, 0.75rem); padding-right: var(--spacing-xs, 0.75rem); }
.px-sm { padding-left: var(--spacing-sm, 0.938rem); padding-right: var(--spacing-sm, 0.938rem); }
.px-md { padding-left: var(--spacing-md, 1.25rem); padding-right: var(--spacing-md, 1.25rem); }
.px-lg { padding-left: var(--spacing-lg, 1.5625rem); padding-right: var(--spacing-lg, 1.5625rem); }

/* Padding vertical */
.py-xs { padding-top: var(--spacing-xs, 0.75rem); padding-bottom: var(--spacing-xs, 0.75rem); }
.py-sm { padding-top: var(--spacing-sm, 0.938rem); padding-bottom: var(--spacing-sm, 0.938rem); }
.py-md { padding-top: var(--spacing-md, 1.25rem); padding-bottom: var(--spacing-md, 1.25rem); }
.py-lg { padding-top: var(--spacing-lg, 1.5625rem); padding-bottom: var(--spacing-lg, 1.5625rem); }

/* ===========================================
   TEXT UTILITIES
   =========================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }

.text-bold { font-weight: var(--font-weight-bold); }
.text-normal { font-weight: var(--font-weight-normal); }

.text-sm { font-size: var(--font-size-sm); }
.text-lg-old { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-lg {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-base, 1.5);
}

.text-small {
  font-size: max(var(--font-size-sm, 0.875rem), var(--min-font-size, 14px));
  line-height: var(--min-line-height, 1.4);
}

/* Text that respects accessibility guidelines */
.text-readable {
  line-height: var(--line-height-base, 1.5);
  max-width: var(--max-width-readable, 65ch);
}

.text-scale-friendly {
  line-height: var(--line-height-base, 1.5);
  max-width: var(--max-width-readable-wide, 75ch);
}

/* Text with minimum font size safety */
.text-small {
  font-size: max(var(--font-size-sm), var(--min-font-size));
  line-height: var(--min-line-height);
}

.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

/* Text overflow handling */
.text-truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* High contrast text for accessibility */
.text-contrast-high {
  color: var(--color-text, #1A1A1A);
  font-weight: var(--font-weight-bold, 600);
}

/* Better focus for text elements */
.focusable-text:focus {
  background-color: var(--color-primary-alpha-light);
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  border-radius: var(--outline-offset-sm);
}

/* High contrast box */
.high-contrast {
  color: var(--color-text);
  background: var(--color-background);
  border: var(--border-width-thin) solid var(--color-border-pale);
}

/* ===========================================
   BORDER & SHADOW UTILITIES
   =========================================== */

.rounded { border-radius: var(--border-radius-full, 0.625rem);  /* 10px */ }
.rounded-sm { border-radius: var(--border-radius-base, 0.3125rem); } /* 5px */
.rounded-md { border-radius: var(--border-radius-md, 0.5rem); } /* 8px */
.rounded-lg { border-radius: var(--border-radius-lg, 0.75rem); } /* 12px */
.rounded-none { border-radius: 0; }

.shadow { box-shadow: var(--box-shadow); }
.shadow-sm { box-shadow: var(--box-shadow-sm); }
.shadow-none { box-shadow: none; }

.border { border: var(--border-width-thin, 0.1rem) solid var(--color-border, #E5E7EB); }
.border-lighter { border: var(--border-width-thin, 0.1rem) solid var(--color-border-lighter, #E2E8F0); }
.border-dark { border: var(--border-width-thin, 0.1rem) solid var(--color-border-dark); }
.border-light { border: var(--border-width-thin, 0.1rem) solid var(--color-border-light); }
.border-none { border: none; }
/* ===========================================
   BACKGROUND UTILITIES
   =========================================== */

.bg-primary {
  background: var(--color-primary);
  color: var(--color-background);
}

.bg-card {
  background: var(--color-card-bg);
}

.bg-section {
  background: var(--color-section-bg);
}

.bg-transparent {
  background: transparent;
}

.bg-white {
  background: var(--color-background);
}

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* Primary button */
.btn-primary {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: var(--border-radius-base);
  background: var(--color-primary);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
  box-shadow: 0 2px 4px var(--color-primary-alpha);
}

.btn-primary:active {
  box-shadow: 0 1px 2px var(--color-primary-alpha);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
}

.btn-primary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Secondary button */
.btn-secondary {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-secondary);
  border-radius: var(--border-radius-base);
  background: var(--color-secondary);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 85%, black);
}

.btn-secondary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Light button used for cancel in new design */
.btn-light {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--slate-400, #90A1B9);
  background: var(--white, #FFF);
  border-radius: var(--border-radius-base); /* 5px */
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold, 600);
  color: var(--gray-800, #1E2939);
  font-size: var(--font-size-lg, 1.125rem); /* 18px */
}

.btn-light:hover {
  background: var(--blue-900, #083575);
  color: var(--white, #FFF);
  box-shadow: 0 2px 4px var(--color-primary-alpha);
}

.btn-light:active {
  box-shadow: 0 1px 2px var(--color-primary-alpha);
}

.btn-light:focus,
.btn-light:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  background: var(--blue-900, #083575);
  color: var(--white, #FFF);
  box-shadow: 0 2px 4px var(--color-primary-alpha);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
}

.btn-light:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Outline button */
.btn-outline {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-primary);
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-background);
}

.btn-outline:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Transparent button (for solid-ui integration) */
.btn-transparent {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.btn-transparent:hover {
  background-color: var(--color-hover-bg);
}

/* Button focus state */
.action-button-focus:focus,
.action-button-focus:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary) !important;
  outline-offset: var(--outline-offset-sm) !important;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha) !important;
  z-index: 1;
}

/* ===========================================
   INPUT UTILITIES
   =========================================== */

.input {
  border-radius: var(--border-radius-base, 0.3125rem);
  border: 1px solid var(--gray-400, #99A1AF);
  background: var(--white, #FFF);
  color: var(--color-text-subheading, var(--gray-900, #101828));
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  padding: var(--spacing-2xs, 0.625rem);
}

.input--checkbox {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  min-height: 1rem;
  padding: 0;
  border: 1px solid var(--gray-400, #99A1AF);
  border-radius: var(--border-radius-sm, 0.25rem);
  accent-color: var(--color-primary, #7C4DFF);
  align-self: auto;
}

.label {
  color: var(--color-text-secondary, #4A5565);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
}

/* ===========================================
   CARD & SECTION COMPONENTS
   =========================================== */

.module-card {
  background: var(--color-card-bg);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.module-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.section-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-bg {
  background: var(--color-section-bg);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-md);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

/* ===========================================
   LIST & TABLE UTILITIES
   =========================================== */

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

.zebra-stripe tr:nth-child(even),
.zebra-stripe > *:nth-child(even) {
  background-color: var(--color-zebra-stripe);
}

/* ===========================================
   DISPLAY & VISIBILITY UTILITIES
   =========================================== */

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ===========================================
   WIDTH & HEIGHT UTILITIES
   =========================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.max-w-full { max-width: 100%; }

/* ===========================================
   POSITION UTILITIES
   =========================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ===========================================
   LOADING & STATUS INDICATORS
   =========================================== */

.loading-text {
  color: var(--color-primary);
  text-align: center;
  margin: var(--spacing-md) 0;
}

.loading-spinner {
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: var(--focus-indicator-width) solid var(--color-border-pale);
  border-top: var(--focus-indicator-width) solid var(--color-primary);
  border-radius: var(--border-radius-full);
  animation: spin var(--animation-duration-slow) linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===========================================
   ARIA ROLE STYLING
   =========================================== */

[role="alert"] {
  padding: var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-error);
  border-radius: var(--border-radius-base);
  background-color: var(--color-primary-alpha-light);
  margin: var(--spacing-md) 0;
}

[role="status"] {
  padding: var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-success);
  border-radius: var(--border-radius-base);
  background-color: var(--color-success-alpha);
  margin: var(--spacing-md) 0;
}

/* ===========================================
   FOCUS TRAP FOR MODALS
   =========================================== */

.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal);
  background: var(--overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===========================================
   MEDIA QUERIES
   =========================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: var(--color-primary);
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary,
  .btn-secondary,
  .btn-outline {
    border-width: var(--border-width-medium);
  }
  
  .module-card,
  .section-bg {
    border: var(--border-width-medium) solid var(--color-border-dark);
  }
}

/* Mobile minimum font size */
@media screen and (max-width: 768px) {
  html {
    font-size: max(16px, 1rem);
  }
}

/* Smooth scroll when no motion preference */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*  
** ------SolidOS Styles------
**
*/

:root {
  --app-header-height: 3.75rem;
}

html {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background: var(--color-background);
  color: var(--color-text-primary); /* new design change, used to be --color-text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: auto;
  min-width: 375px;
}

body {
  margin: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100dvh;
  min-width: 375px;
  overflow: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: inherit;
  color: inherit;
}

#PageHeader,
#mainSolidUiHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--color-header-row-bg);
}

#mainSolidUiHeader {
  display: block;
}

#MainContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
  container-type: inline-size;          /* enable @container queries */
  display: flex;
  flex-direction: column;
}

#PageFooter {
  flex-shrink: 0;
}


/* ── New responsive app nav layout ── */
.app-main {
  position: static;
  display: flex;
  flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
  min-height: 0;
  margin-top: var(--app-header-height);
  height: auto;
  min-height: calc(100dvh - var(--app-header-height));
  top: auto;
}

.app-shell {
  display: flex;
  flex: 1;          /* expand to fill .app-main */
  min-width: 0;     /* prevent overflow in flex context */
  min-height: 0;    /* allow children to shrink correctly */
}

.app-nav {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-menu-bg);
  padding: 0.75rem;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100vh - var(--app-header-height)); /* header height */
  transition: transform 0.25s ease-in-out;
}

.app-view {
  flex: 1;
  padding: 0 1rem 1rem;  /* no top padding — sit flush under fixed header */
  min-width: 0;
}

/* OutlineView is a <table> — must explicitly fill the flex parent */
.outline-view {
  width: 100%;
}

@media (max-width: 768px) {
  #MainContent {
    margin-left: 0;
  }

  .app-shell {
    flex-direction: column;
  }

  .app-nav {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    bottom: 0;
    z-index: 110;
    width: min(80vw, 320px);
    background: var(--color-menu-bg);
    padding: 0.75rem;
  }

  .app-nav.desktop {
    display: none;
  }

  .app-view {
    padding: 0 0.75rem 1rem;
  }

  #MenuToggleBtn {
    display: inline-flex;
    background: transparent;
    color: white;
    border: none;
    font-size: 2rem;

  }
}
@media (min-width: 769px) {

  #MenuToggleBtn {
    display: none;
  }

  #NavMenu {
    position: relative;
    transform: none !important;
    top: auto;
    left: auto;
    height: auto;
  }
}

/* HTML improvements - profile pane */
/* Semantic HTML5 improvements */
article, aside, section {
  display: block;
}

header {
  margin-bottom: var(--spacing-md);
}

nav {
  display: block;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* end HTML improvements - profile pane */
/* ── Pane icon tray (responsive) ── */
.pane-icon-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0;
  overflow-x: auto;         /* horizontal scroll on very narrow screens */
  -webkit-overflow-scrolling: touch;
}

.pane-icon-tray img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: outline 0.15s;
}
.pane-icon-tray img:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 2px;
}

/* ── Subject blocks ── */
.subject-block {
  border-bottom: 1px solid var(--color-border-pale);
  padding-block: 0.75rem;
}

/* ── Responsive breakpoints via container queries ── */
@container (max-width: 40rem) {
  .pane-icon-tray {
    justify-content: center;
  }
  .subject-block h1 {
    font-size: 1.15rem;
  }
}

/* Improved heading hierarchy */
h1, h2, h3, h4, h5, h6 {
  /* color: var(--color-primary); new design no longer has purple headings. */
  font-weight: var(--font-weight-bold, 600);
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2em; }    /* 32px */
h2 { font-size: 1.5em; }  /* 24px */
h3 { font-size: var(--font-size-xl, 1.375rem); } /* New design: 22px was 20px*/
h4 { font-size: var(--font-size-lg, 1.125rem); }/* 18px */
h5, h6 { font-size: var(--font-size-base, 1rem); }/* 16px */

/* Better paragraph spacing */
p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-base);
  max-width: 65ch; /* Optimal reading width */
}

/* Improved link accessibility */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.125em;
  text-decoration-thickness: 0.0625em;
}

a:hover, a:focus {
  text-decoration-thickness: 0.125em;
}

.warning {
  color: var(--color-warning);
}
/* This was used in manager.js and was turning many things green.
   Doesn't fit with new design. */
.selected {
  /* background-color: var(--color-selected-bg); */
}

/* used in profile-pane as success button */
.licOkay {
  background-color: var(--color-success-bg);
}

/*
** other potential colors for CC:
**  #C4FF55. "faded" version of CC
**  #486d00, actual CC
**  #ccff99, mit page color
*/

strong {
  font-size: 120%;
  color: var(--color-text);
  font-weight: bold;
}
div.Outliner {
  margin-top: 2em;
  padding: 0.8em;
}
form#TabulateForm {
  padding: 0.8em;
}
div#addViewForm {
  padding: 0.8em;
}
iframe {
  background: var(--color-iframe-bg);
}

/* Map */

img.pic {
  max-height: 20em;
}

/* Sources */

.fetched {
  background-color: var(--color-fetch-bg);
}
.requested {
  background-color: var(--color-request-bg);
}
.failed {
  color: var(--color-warning);
  background-color: var(--color-error-bg);
}
.unparseable {
  background-color: var(--color-unparseable-bg);
}

pre#status {
  font-size: 100%;
}

/* Panes */
/*
td.internal  {  }

/*   Moved into code:
div.internalPane { background-color: #ddddff; padding: 0.5em;
border-radius: 1em;   border-radius: .4em;  }

div.instancePane {
        border-top: solid 1px #777; border-bottom: solid 1px #777;
        margin-top: 0.5em; margin-bottom: 0.5em }
*/

/* ***************** For the Justification UI Panes **********/

div.container {
  border-top: solid 5px var(--color-container-border);
  border-left: solid 5px var(--color-container-border);
  border-bottom: solid 5px var(--color-container-border);
  border-right: solid 5px var(--color-container-border);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.75em;
}
/*
div.nonCompliantPane {
    border-top: solid 1px red;
    border-left: solid 1px red;
    border-bottom: solid 1px red;
    border-right: solid 1px red;
    padding: 0.5em;
    background-color: #fbf0f7;
    margin-top: 0.5em; margin-bottom: 0.5em;
    border-radius: 1em;
}

div.compliantPane {
    border-top: solid 1px green;
    border-left: solid 1px green;
    border-bottom: solid 1px green;
    border-right: solid 1px green;
    padding: 0.5em;
    background-color: #def8e0;
    margin-top: 0.5em; margin-bottom: 0.5em;
    border-radius: 1em;
}
*/
div.justification {
  font-size: 100%;
  padding: 0 5px;
  width: 80%; /* @@ Don't use pixels -- use em */
  background-color: var(--color-background);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

div.description {
  font-size: 120%;
  border-top: solid 1px var(--color-alert-border);
  border-left: solid 1px var(--color-alert-border);
  border-bottom: solid 1px var(--color-alert-border);
  border-right: solid 1px var(--color-alert-border);
  padding: 15px;
  width: 100%;
  background-color: var(--color-alert-bg);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
  position: relative;
  left: 0%;
}

div.premises {
  font-size: 100%;
  border-top: solid 1px var(--color-info-border);
  border-left: solid 1px var(--color-info-border);
  border-bottom: solid 1px var(--color-info-border);
  border-right: solid 1px var(--color-info-border);
  padding: 0.5px;
  width: 100%;
  background-color: var(--color-info-bg);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
  position: relative;
  left: 0%; /*May be we could shift the left margin a bit?*/
}

/* ***************** Social Pane **********/

div.socialPane {
  border-top: solid 1px var(--color-border-dark);
  border-bottom: solid 1px var(--color-border-dark);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin: 0;
}

img.foafPic {
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  /*float:right; */
}

div.mildNotice {
  border: dashed 0.1em var(--color-border-dark);
  margin: 1em;
  padding: 1em;
  width: 80%; /* float: right; */
  background-color: var(--color-mild-notice-bg);
}

.friendBox {
  /* height: 4em; */
  border-top: solid 0.01em var(--color-border);
  margin: 0;
  padding: 0.3em;
  /* float: left; */
}
.friendBoxBig {
  height: 20em;
  border-top: solid 0.01em var(--color-text-dark-gray); /* float: left; */
}

.socialPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.socialPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

img.foafThumb {
  height: 3em;
  border: 0px;
  margin: 0.1em;
  padding: 0.1em;
  vertical-align: middle;
} /* Thumbnail of a fiend etc */

.friendBox .confirmed {
  font-weight: bold;
}

table.inputForm {
  font-size: 100%;
}

.mainBlock {
  background: var(--color-main-block-bg);
  color: var(--color-text);
  float: left;
  width: 46%;
  margin: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.navBlock {
  background-color: var(--color-nav-block-bg);
  float: left;
  width: 25%;
  border: 0;
  padding: 0.5em;
  margin: 0;
}

.navBlock .navSection {
  border: solid 0.05em var(--color-nav-block-border);
  padding: 0.5em;
  border-radius: 0.5em; /* CSS3: border-radius: .4em; */
}

div.socialPane h2 {
  color: var(--color-text-dark-gray);
}
div.socialPane h3 {
  color: var(--color-text-dark-gray);
}

div.social_linkButton {
  width: 80%;
  background-color: var(--color-background);
  border: solid 0.05em var(--color-border);
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  padding: 0.1em;
  text-align: center;
}

/*  For question-and-answer stuff for new web id but quite reusable.
*/
.answer {
  font-style: italic;
  color: var(--color-text-answer);
  text-decoration: underline;
}
.tip {
  font-style: normal;
  color: var(--color-text);
  margin: 1em;
}
.task {
  font-style: normal;
  color: var(--color-text);
  margin: 1em;
  background-color: var(--color-mild-notice-bg);
  padding: 1em;
  border-radius: 1em; /* CSS3: border-radius: 1em; */
}
.success {
  background-color: var(--color-success-bg);
}
.failure {
  background-color: var(--color-failure-bg);
  border: 0.5em var(--color-failure-border);
}
div.unknown {
  display: none;
}
div.yes > div.negative {
  display: none;
}
div.no > div.affirmative {
  display: none;
}

/******************* Exception Pane ********
**
** A pane created when the loading of a pane
** throws an exception
**/

div.exceptionPane pre {
  background-color: var(--color-error-notice-bg);
}

/******************* Category Pane *********/

.categoryPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.categoryPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

.categoryBottomClass {
  background-color: var(--color-category-class-bg);
  border: 0.1em solid var(--color-category-class-border);
}

.categoryTable {
  padding-left: 2em;
}
.categoryPane {
  background-color: var(--color-category-bg);
  padding: 0.5em;
  border-width: 0.1em;
  border-color: var(--color-category-border);
  border-radius: 1em; /* CSS3: border-radius: .4em; */
}

.categoryPane a.categoryWhy {
  color: var(--color-border-pale);
}
.categoryPane a.categoryWhy:link {
  color: var(--color-border-pale);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a.categoryWhy:visited {
  color: var(--color-border-pale);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a.categoryWhy:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.categoryPane a.categoryWhy:active {
  color: var(--color-border-pale);
  text-decoration: none;
}

.categoryPane a.categoryWhy {
  color: grey;
}
/* a.categoryWhy:hover { color: #3B5998 } */

/******************* PubsPane *********/

.pubsPane {
  background-color: var(--color-pubs-pane-bg);
  border-width: 0.1em;
  border-color: var(--color-pubs-pane-border);
  border-radius: 1em; /* CSS3: border-radius: .4em; */
  padding: 1em;

  text-decoration: none;
  font-weight: bold;
}

.pubsPane h2 {
  margin: 0;
  padding: 0;
}

.pubsPane form {
  padding-left: 1em;
}

/*Clear both - start things on individula lines */
.pubsRow {
  margin: 0.5em 3em 0.5em 0em;
  clear: both;
}

/*inputs float right to line up */
.pubsRow input {
  float: right;
  width: 20em;
  height: 1em;
}
#inpid_book_description {
  float: right;
  height: 8em;
  width: 17em;
}

.pubsRow button {
  float: left;
  height: 2em;
  padding: 0.5em;
  margin: 0.5em;
}

.hideit {
  display: none;
}

.active {
  /* display: visible; */
}

.submitRow {
  clear: both;
  height: 5em;
}

.submitRow button {
  width: 7em;
  height: 100%;
}

#buttonid {
  display: none;
}

#buttonid.active {
  display: inline;
}

/******************* CV Pane *****************/

.CVclass {
  background-color: var(--color-cv-pane-bg);
}

.imageView {
  border: 1em var(--color-background);
  margin: 1em;
}

/* Generic things useful anywhere */

img.hideTillHover {
  visibility: hidden;
}
img.hideTillHover:hover {
  visibility: visible;
}
.hideTillHover img {
  visibility: hidden;
}
.hideTillHover:hover img {
  visibility: visible;
}
.hideTillHover a {
  visibility: hidden;
}
.hideTillHover:hover a {
  visibility: visible;
}
.hoverControl .hoverControlHide {
  visibility: hidden;
}
.hoverControl:hover .hoverControlHide {
  visibility: visible;
}

/* Pane icons: */

/*
.hoverControl .paneShown{ border-radius: 0.5em;
            border-top:         solid #222 1px;
            border-left:        solid #222 0.1em; border-bottom: solid #eee 0.1em;
            border-right:       solid #eee 0.1em;
            margin-left:        1em; padding: 3px;
            background-color:   #ffd;
        visibility: hidden;}

.hoverControl:hover .paneShown{ border-radius: 0.5em;
            border-top:         solid #222 1px;
            border-left:        solid #222 0.1em; border-bottom: solid #eee 0.1em;
            border-right:       solid #eee 0.1em;
            margin-left:        1em; padding: 3px;
            background-color:   #ffd;
        visibility:visible; }

.paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px}

.hoverControl .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px;  visibility:hidden;}
.hoverControl:hover .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:visible; }
*/

/* outline object view */
img.outlineImage {
  max-height: 20em;
  max-width: 30em;
} /* save vertical space */
/* Compare facebook which only limits width -> lots of tall images! */

img.phoneIcon {
  border: 0;
  margin-left: 1em;
}

table#sources {
  width: 100%;
}

table {
  border-spacing: 0;
  margin: 0em;
  border-collapse: collapse; /* from contact-pane accessibility */
  width: 100%; /* from contact-pane accessibility */
}

td {
  font-size: 100%;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  margin: 0.2em;
  /*  border-right: solid purple 0.1em ;
    border-bottom: solid purple 0.1em;
*/
  vertical-align: top;
  /*    display: compact;    Causes console errors in ffox */
}

td.pred {
  padding-left: 0.5em;
}
/*td.optButton { display: none }
tr[parentOfSelected] > td.pred td.optButton { display: block }
*/

table.results {
  width: 100%;
}

table.results td {
  font-size: 100%;
  background-color: var(--color-table-result-bg);
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  margin: 0.1em;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;

  vertical-align: top;
}

table.results th {
  font-size: 100%;
  background-color: var(--color-table-header-bg);
  border-left: none;
  border-top: none;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;
  margin: 0.3em;
  padding-top: 0.5em;
  padding-right: 0.5em;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;

  vertical-align: top;
}

/* Hide sections of the display.
Collpase not actually in CSS1 except for table row and col.
Supposed to leave layoutunchanged. So we float it too. */

.collapse {
  display: none;
}
.expand {
  display: block;
}

/* log classes */
.nrml {
  color: var(--color-log-normal);
}
.info {
  color: var(--color-log-info);
}
.warn {
  color: var(--color-log-warn);
  background-color: var(--color-log-warn-bg);
}
.eror {
  color: var(--color-log-error);
  background-color: var(--color-log-error-bg);
}
.mesg {
  color: var(--color-log-message);
}
.dbug {
  color: var(--color-log-debug);
  background-color: var(--color-log-debug-bg);
} /* Blue */

/* Try to get the icons to flush right in the cell */

.sortheader {
  color: var(--color-log-normal);
  text-decoration: none;
  position: relative;
  border: none; /* Jim's commented out */
}

.colclose {
  float: right;
  color: var(--color-col-close);
} /* Should be 67% transp black */
.sortarrow {
  float: left;
  color: var(--color-sort-arrow);
  border: none;
}

/* CSS Stuff for tabbed Views.. */
table.viewTable {
  padding: 0;
  margin: 0;
  border-style: none;
  border-width: 0;
  height: 40em;
  width: 100%;
  border-spacing: 0;
}

div.viewTabs {
  background-color: var(--color-view-tab-bg);
  padding: 0;
}

div.viewWindows {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0em;
  padding: 0em;
  border-right: solid var(--color-border-light) 0.1em; /* was 2px */
  border-left: solid var(--color-border-light) 0.1em;
  border-bottom: solid var(--color-border-light) 0.1em;
  background-color: var(--color-view-window-bg);
}

div.querySelect {
  background-color: var(--color-query-select-bg);
  width: 100%;
  height: 100%;
  border-left: solid var(--color-border-light) 0.1em;
  border-bottom: solid var(--color-border-light) 0.1em;
  overflow: auto;
  margin: 0em;
  padding: 0em;
}

td.viewTableData {
  padding: 0em;
  margin: 0em;
  height: 100%;
  width: 80%;
}

td.queryTableData {
  padding: 0em;
  margin: 0em;
  border-width: 0em;
  height: 100%;
  width: 20%;
  border-style: none;
}

table.viewTable tr {
  height: 100%;
  margin: 0em;
  padding: 0em;
  border-style: none;
}

/* Improved link accessibility from profile-pane */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.125em;
  text-decoration-thickness: 0.0625em;
}

a:hover, a:focus {
  text-decoration-thickness: 0.125em;
}

/* OLD
a {
  color: var(--color-text-link);
  text-decoration: none;
  cursor: pointer;
} */
a.inactive {
  background-color: var(--color-tab-inactive-bg);
  border-right: solid var(--color-tab-inactive-border) 0.1em;
  border-top: solid var(--color-tab-inactive-border-light) 0.1em;
  border-left: solid var(--color-tab-inactive-border-light) 0.1em;
  padding-top: 0.3em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 0em;
  margin-right: 0.1em;
  color: var(--color-tab-inactive-text);
  text-decoration: none;
}

a.active {
  background-color: var(--color-tab-active-bg);
  border-right: solid var(--color-tab-active-border) 0.1em;
  border-top: solid var(--color-tab-active-border-light) 0.1em;
  border-left: solid var(--color-tab-active-border-light) 0.1em;
  padding-top: 0.3em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 0em;
  margin-right: 0.1em;
  color: var(--color-tab-active-text);
  text-decoration: none;
}

input.tabQueryName {
  border: solid var(--color-border-light) 0.1em;
  width: 100%;
  padding: 0em;
}

input.delQueryButton {
  border: none;
  color: var(--color-warning);
  background-color: var(--color-tab-active-bg);
  cursor: pointer;
  padding: 0em;
}

td.checkboxTD {
  padding-right: 0.5em;
}

.sourceHighlight {
  background-color: var(--color-source-highlight);
}

#MenuBar {
  padding: 0.5em;
  position: fixed;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  background-color: var(--color-nav-block-bg);
  border: 0.1em solid var(--color-border-light);
}

#TabulatorStatusWidget {
  position: fixed;
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
}

div.mapKeyDiv {
  position: relative;
  float: right;
  margin: 0.3em;
  color: var(--color-border-dark);
  background: var(--color-background);
  border: solid var(--color-border-dark) 0.1em;
  padding: 0.1em;
}

span.closeQuerySpan {
  float: right;
  text-align: right;
  height: 0.1em;
  overflow: visible;
}

span.openQuerySpan {
  float: left;
  overflow: visible;
  height: 0em;
  text-align: left;
  position: relative;
  top: 0em;
  z-index: 1;
}

input.textinput {
  width: 100%;
  border: none;
  font-size: 95%;
  padding: 0em;
  margin: 0;
}

textarea.textinput {
  border: none;
}

.pendingedit {
  color: var(--color-pending-edit);
}

td.undetermined {
  color: var(--color-nav-block-border);
  font-style: italic;
}

/*revert back*/
td.undetermined table {
  color: var(--color-text);
  font-style: normal;
}

/*color style from http://developer.yahoo.com/yui/docs/module_menu.html*/
.outlineMenu {
  position: absolute;
  /*width:10em;*/
  height: 10em; /*   Jim's commented out */
  background: var(--color-menu-bg) none repeat scroll 0%;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid;
  /*padding:.2em;*/
}
.outlineMenu table {
  cursor: default;
  width: 100%;
  text-align: left;
  padding: 5px 5px;
}
.outlineMenu div {
  /*width:6em;*/
  overflow: auto;
  white-space: nowrap;
}
.outlineMenu td {
  color: var(--color-menu-item-text);
}
.outlineMenu .activeItem {
  background: var(--color-menu-item-active);
} /* @@ Jim's: #f4e8fc; */
.outlineMenu input {
  margin: 0.2em;
}

/* The following two classes were used for defaultPane
I'm not sure if they are used anywhere else so i'm not deleting. */
div.bottom-border {
  border: 0.2em solid transparent;
  width: 100%;
}

div.bottom-border-active {
  cursor: copy;
  border: 0.2em solid;
  border-color: var(--color-bottom-border-highlight);
}

/* The thing below was for the kenny's orange bar*/
/* @@@ This is not specific enough
td{
    margin: 0;
    padding: 0;
}
*/

.deleteIcon {
  margin-left: 0.1em;
}

.deleteCol {
  float: right;
  display: inline;
}

.suggestion_list {
  background: var(--color-suggestion-bg);
  border: 1px solid var(--color-suggestion-border);
  padding: 4px;
}

.suggestion_list ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.suggestion_list a {
  text-decoration: none;
  color: var(--color-suggestion-link);
}

.suggestion_list .selected {
  background: var(--color-suggestion-selected-bg);
  color: var(--color-suggestion-selected-text);
}

.suggestion_list .selected a {
  color: var(--color-suggestion-selected-text);
}

#autosuggest {
  display: none;
}

/*
Start of styles for the photoPane, by albert08@csail.mit.edu
*/
div.PhotoContentPane {
  float: left;
  width: 900px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
div.PhotoListPanel {
  float: left;
  padding: 5px;
  border: 1px solid var(--color-photo-border);
  width: 540px;
  min-height: 300px;
}
div.PhotoInfoPanel {
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  width: 300px;
  text-align: center;
  margin: 0px 0px 10px 10px;
}
div.TagMenu {
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  width: 300px;
  margin: 0px 0px 0px 10px;
  text-align: justify;
}
.tagItem {
  float: left;
  padding: 2px;
  margin: 2px;
  cursor: pointer;
}
.tagItem_h {
  float: left;
  padding: 2px;
  margin: 1px;
  border: 1px solid var(--color-photo-tag-highlight-border);
  background-color: var(--color-photo-tag-highlight);
  cursor: pointer;
}
div.photoItem {
  float: left;
  width: 100%;
}
div.photoFrame {
  border-right: 1px solid var(--color-photo-border);
  width: 260px;
  padding: 10px;
  margin: 10px 10px 10px 10px;
  text-align: center;
  float: left;
}
img.photoThumbnail {
  border: 1px solid var(--color-photo-thumb-border);
  margin: auto auto auto auto;
}
.photoListTags {
  width: 200px;
  margin-top: 10px;
  padding-top: 10px;
  float: left;
}
.photoList_tag {
  background: transparent
    url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
    1px no-repeat;
  padding: 1px 0px 1px 18px;
  margin-left: 5px;
}
.TagMenu_tag {
  background: transparent
    url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
    1px no-repeat;
  padding: 1px 0px 1px 18px;
  margin-left: 5px;
}
div.photoImportContentPane {
  float: left;
  padding: 0px;
  width: 930px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
.photoImportTitle {
  font-size: 1rem;
  font-weight: bold;
}
.photoItemPanel {
  width: 260px;
  height: 300px;
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  margin: 0px 10px 10px 0px;
}
.photoControlImg {
  border: 0px;
  cursor: pointer;
}
.photoControlImgInactive {
  opacity: 0.5;
  border: 0px;
}
#photoPageInfo {
  font-family: var(--font-family-ui);
  font-size: 0.875rem;
  font-weight: bold;
}
.controls {
  clear: both;
  text-align: right;
  margin: 15px 15px 0px 0px;
}
.controlButton {
  margin: 0px 0px 0px 10px;
}
div.TagPane {
  min-width: 500px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
div.TagSemanticsPanel {
  margin: 5px 0px 20px 0px;
}
div.TagSemanticsTable {
  width: 100%;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
}
div.AddTagSemantics {
  margin: 50px 0px 10px 0px;
}
.controlSelect {
  margin: 5px;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
}
.tagURIInput {
  margin: 5px;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
  width: 300px;
}
div.TagPane hr {
  border: 1px solid var(--color-photo-border);
}
/*
End of styles for the photoPane
*/

/*
Styles for tableViewPane
*/

.tableViewPane table th {
  background-color: var(--color-tab-inactive-bg);
  color: var(--color-log-normal);
}

.tableViewPane table th a {
  color: var(--color-text-secondary);
}

.tableViewPane table .selectors td {
  background-color: var(--color-tab-active-bg);
}

.tableViewPane table td {
  border-bottom: 1px solid var(--color-data-pane-border-top);
  border-right: 1px solid var(--color-data-pane-border-top);
}

.tableViewPane .toolbar td {
  border: none;
}

.tableViewPane .sparqlButton {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-data-pane-border-top);
}

.tableViewPane .sparqlDialog {
  position: fixed;
  top: 40px;
  left: 100px;
  width: 600px;
  background: var(--color-background);
  border: 1px solid var(--color-data-pane-border-top);
  padding: 5px;
}

.tableViewPane .sparqlDialog textarea {
  width: 590px;
  height: 250px;
}

/* These should be the same as with hthe dataContentPane */
.tableViewPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.tableViewPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

.tableViewPane tr {
  border-color: var(--color-border-darker);
  padding-left: 0.3em;
  padding-right: 0.3em;
}

/*The 'display explanation' feature*/
.inquiry {
  padding-left: 0.2em;
  color: var(--color-warning);
  font-family: var(--font-family-ui);
  font-weight: bold;
}

/*
End of styles for tableViewPane
*/

/* Styles for   FORM PANE
**
** Colors from data cotent pane
*/

.formPane a {
  color: var(--color-text-link);
  text-decoration: none;
}
.formPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
}
.formPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
}
.formPane a:hover {
  color: var(--color-text-link-hover);
  font-weight: bold;
} /* was  text-decoration: underline; */
.formPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

/* ends */

@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) {
  box-shadow: $x-axis $y-axis $blur $color;
  -webkit-box-shadow: $x-axis $y-axis $blur $color;
  -moz-box-shadow: $x-axis $y-axis $blur $color;
  -o-box-shadow: $x-axis $y-axis $blur $color;
}

/* Improve focus management for interactive elements */
[role="button"]:focus,
[role="link"]:focus,
button:focus,
a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--color-background);
}
/* Enhanced error message accessibility */
[role="alert"] {
  padding: var(--spacing-md);
  border: 2px solid var(--color-error);
  border-radius: var(--border-radius-base);
  background-color: rgba(176, 0, 32, 0.1);
  margin: var(--spacing-md) 0;
}

/* Success message styling */
[role="status"] {
  padding: var(--spacing-md);
  border: 2px solid var(--color-success);
  border-radius: var(--border-radius-base);
  background-color: rgba(0, 200, 83, 0.1);
  margin: var(--spacing-md) 0;
}

th {
  background-color: var(--color-section-bg);
  font-weight: 600;
  text-align: left;
  padding: var(--spacing-sm);
}

/* Focus trap for modals */
.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Enhanced button accessibility */
button, [role="button"] {
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius-base);
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: all var(--animation-duration) ease;
  position: relative;
}

button:disabled, [role="button"][aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading indicator accessibility */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-pale);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: var(--color-primary);
  }
}
/* copied from profile-pane */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --color-border-pale: #000;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  }
}
/* end of media copied from PROFILE-PANE */
/* focus copied from profile-pane */
:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--color-background);
}

/* Enhanced keyboard navigation */
*:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--color-background), 0 0 0 4px rgba(124, 77, 255, 0.2);
  border-radius: 2px;
  transition: none; /* Remove transitions on focus for immediate feedback */
}

:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-primary, #7C4DFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--color-background, #F8F9FB);
}

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none; /* new */
}

/* Prevent labels from appearing focusable to keyboard users. */
label:focus,
label:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* end of focus copied from profile-pane */

/* end of accessibility from PROFILE-PANE */

/* Generated by AI */
@media screen and (max-width: 768px) {
  #PageHeader,
  #PageFooter {
    width: 100%;
  }

  img.outlineImage,
  img.pic,
  img.foafPic {
    height: auto;
    max-width: 100%;
  }

  div.description,
  div.premises,
  div.justification,
  div.mildNotice {
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

html[data-layout="mobile"] #PageBody {
  min-height: auto;
}

html[data-layout="mobile"] #MainContent {
  overscroll-behavior: x contain;
}

/* END of Generated by AI */

/*# sourceMappingURL=mash.css.map*/