Additional Genders

frontend/src/index.css

@@ -1000,10 +1000,19 @@ textarea {
   display: inline;
 }
 
+.bird-card-title .bird-card-gender-cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  line-height: 1;
+}
+
 .gender-inline {
-  font-size: 1.2rem;
+  font-size: 1.45rem;
   font-weight: 700;
   line-height: 1;
+  display: inline-flex;
+  align-items: center;
 }
 
 .gender-inline.male {
@@ -1018,6 +1027,99 @@ textarea {
   color: var(--muted);
 }
 
+.gender-source-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.45rem;
+  height: 1.45rem;
+  flex: 0 0 1.45rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 800;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.gender-source-icon svg {
+  width: 1.28rem;
+  height: 1.28rem;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.gender-source-icon.dna {
+  width: 1.9rem;
+  height: 1.9rem;
+  flex-basis: 1.9rem;
+  background: rgba(91, 74, 161, 0.1);
+  color: #5b4aa1;
+}
+
+.gender-source-icon.dna svg {
+  width: 1.72rem;
+  height: 1.72rem;
+}
+
+.gender-source-icon .dna-ring {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.15;
+}
+
+.gender-source-icon .dna-strand {
+  stroke: currentColor;
+  stroke-width: 1.35;
+}
+
+.gender-source-icon .dna-rung {
+  stroke: currentColor;
+  stroke-width: 1.05;
+  opacity: 0.82;
+}
+
+.gender-source-icon .dna-dot {
+  fill: currentColor;
+}
+
+.gender-source-icon.assumed {
+  width: 1.9rem;
+  height: 1.9rem;
+  flex-basis: 1.9rem;
+  background: rgba(93, 95, 89, 0.12);
+  color: var(--muted);
+}
+
+.gender-source-icon.assumed svg {
+  width: 1.72rem;
+  height: 1.72rem;
+}
+
+.gender-source-icon .assumed-eye {
+  stroke: currentColor;
+  stroke-width: 1.7;
+}
+
+.gender-source-icon .assumed-pupil {
+  fill: currentColor;
+}
+
+.bird-card-title .gender-source-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  flex-basis: 1.05rem;
+}
+
+.bird-card-title .gender-source-icon svg {
+  display: block;
+  width: 0.92rem;
+  height: 0.92rem;
+}
+
 .bird-avatar,
 .profile-photo {
   width: 56px;
@@ -1375,14 +1477,26 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.9rem;
+  width: 1.9rem;
   height: 1.9rem;
+  flex: 0 0 1.9rem;
   border-radius: 999px;
-  font-size: 1.2rem;
+  font-size: 1.45rem;
   font-weight: 700;
   line-height: 1;
 }
 
+.gender-symbol-mark {
+  display: block;
+  line-height: 0.82;
+  transform: scale(1.16);
+  transform-origin: center;
+}
+
+.profile-title .gender-symbol-mark {
+  transform: scale(1.28);
+}
+
 .gender-symbol.male {
   background: rgba(39, 105, 179, 0.12);
   color: var(--accent-blue);
@@ -1405,7 +1519,7 @@ textarea {
 
 .segmented-control {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
   gap: 0.55rem;
 }