Added timeline feature

frontend/src/index.css

@@ -616,14 +616,6 @@ textarea {
   break-inside: avoid;
 }
 
-.settings-card-bird-profiles {
-  order: 1;
-}
-
-.settings-card-bird-profiles[hidden] {
-  display: none;
-}
-
 .settings-card-collaborators {
   order: 2;
 }
@@ -1332,6 +1324,115 @@ textarea {
   align-items: center;
 }
 
+.bird-timeline-card {
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 0.75rem;
+  border: 1px solid rgba(39, 105, 179, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.76);
+}
+
+.bird-timeline-graph-card {
+  padding: 0.85rem;
+  border: 1px solid rgba(39, 105, 179, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.72);
+  overflow: hidden;
+}
+
+.bird-timeline-graph {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 140px;
+}
+
+.bird-timeline-graph-line {
+  stroke: url(#timelineLine);
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+
+.bird-timeline-graph-connector {
+  stroke: rgba(39, 105, 179, 0.18);
+  stroke-width: 2;
+  stroke-dasharray: 4 5;
+}
+
+.bird-timeline-graph-dot {
+  fill: #fffdf9;
+  stroke: var(--accent-green);
+  stroke-width: 4;
+}
+
+.bird-timeline-graph-dot.owner_changed {
+  stroke: var(--accent-blue);
+}
+
+.bird-timeline-graph-dot.transferred {
+  stroke: var(--accent-red);
+}
+
+.bird-timeline-graph-label,
+.bird-timeline-graph-meta {
+  font-size: 0.72rem;
+  fill: var(--ink);
+}
+
+.bird-timeline-graph-label {
+  font-weight: 700;
+}
+
+.bird-timeline-graph-meta {
+  fill: var(--muted);
+}
+
+.bird-timeline-form {
+  padding: 0.85rem;
+  border: 1px solid rgba(35, 138, 90, 0.14);
+  border-radius: 8px;
+  background: rgba(240, 248, 244, 0.54);
+}
+
+.bird-timeline-marker {
+  width: 12px;
+  height: 12px;
+  margin-top: 0.25rem;
+  border-radius: 999px;
+  background: var(--accent-green);
+  box-shadow: 0 0 0 4px rgba(35, 138, 90, 0.12);
+}
+
+.bird-timeline-content {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.bird-timeline-content > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.bird-timeline-content strong,
+.bird-timeline-content span,
+.bird-timeline-content small,
+.bird-timeline-content p {
+  overflow-wrap: anywhere;
+}
+
+.bird-timeline-content span,
+.bird-timeline-content small {
+  color: var(--muted);
+}
+
+.bird-timeline-content p {
+  margin: 0;
+  color: var(--ink);
+}
+
 .legend-grid,
 .detail-grid,
 .summary-grid {
@@ -1431,6 +1532,7 @@ textarea {
 .bird-detail-tab .info-tab-icon,
 .bird-detail-tab .note-tab-icon,
 .bird-detail-tab .report-tab-icon,
+.bird-detail-tab .timeline-tab-icon,
 .bird-detail-tab .audit-tab-icon,
 .bird-detail-tab .vet-tab-icon {
   width: 24px;
@@ -1459,7 +1561,7 @@ textarea {
 
 .profile-copy {
   display: grid;
-  gap: 0.3rem;
+  gap: 0.18rem;
 }
 
 .profile-copy h3 {
@@ -1467,6 +1569,10 @@ textarea {
   font-size: 1.6rem;
 }
 
+.profile-copy p {
+  margin: 0;
+}
+
 .profile-title {
   display: inline-flex;
   align-items: center;