Match Angular TimeGroup + expanded time-row typography

Render the latest time on top (30px/light/#333) with the crossed-out
scheduled time below (12px/#f37b09/line-through), mirroring Angular's
'time' vs 'oldTime' pattern instead of the inverted order React had.
Drop the local .flight-card__time font-size override so TimeGroup owns
its own typography.

In the expanded panel, show both scheduled and latest time columns.
Angular falls back to estimatedBlockOff/On when actual is absent and
labels the column 'Ожидаемое' vs 'Фактическое' accordingly — mirror
that logic so flights with only an ETA surface it.

src/ui/flights/FlightCard.scss

@@ -59,9 +59,7 @@
   }
 
   &__time {
-    font-size: 20px;
-    line-height: 1.1;
-    color: #222;
+    // TimeGroup owns its own 30px/300 typography; just align it.
     text-align: left;
 
     &--arrival {

src/ui/flights/FlightCard.tsx

@@ -102,13 +102,20 @@ export const FlightCard: FC<FlightCardProps> = ({
   };
 
   const depScheduled = timeWithOffset(depTimes.scheduledDeparture.local);
-  const depActual = depTimes.actualBlockOff?.local
-    ? timeWithOffset(depTimes.actualBlockOff.local)
-    : null;
+  // Angular shows the latest available dep time as actual>estimated.
+  // The caption changes with it: 'Фактическое' for actual, 'Ожидаемое'
+  // for estimated-only.
+  const depLatestTimes = depTimes.actualBlockOff ?? depTimes.estimatedBlockOff;
+  const depLatest = depLatestTimes ? timeWithOffset(depLatestTimes.local) : null;
+  const depLatestCaptionKey = depTimes.actualBlockOff
+    ? "SHARED.ACTUAL"
+    : "SHARED.EXPECTED";
   const arrScheduled = timeWithOffset(arrTimes.scheduledArrival.local);
-  const arrActual = arrTimes.actualBlockOn?.local
-    ? timeWithOffset(arrTimes.actualBlockOn.local)
-    : null;
+  const arrLatestTimes = arrTimes.actualBlockOn ?? arrTimes.estimatedBlockOn;
+  const arrLatest = arrLatestTimes ? timeWithOffset(arrLatestTimes.local) : null;
+  const arrLatestCaptionKey = arrTimes.actualBlockOn
+    ? "SHARED.ACTUAL"
+    : "SHARED.EXPECTED";
 
   const boarding = departureLeg.transition?.boarding;
   const BOARDING_STATUS_KEY: Record<string, string> = {
@@ -218,12 +225,12 @@ export const FlightCard: FC<FlightCardProps> = ({
                 </span>
                 <span className="flight-card__detail-value">{depScheduled}</span>
               </div>
-              {depActual && (
+              {depLatest && (
                 <div>
                   <span className="flight-card__detail-caption">
-                    {t("SHARED.ACTUAL")}
+                    {t(depLatestCaptionKey)}
                   </span>
-                  <span className="flight-card__detail-value">{depActual}</span>
+                  <span className="flight-card__detail-value">{depLatest}</span>
                 </div>
               )}
             </div>
@@ -234,12 +241,12 @@ export const FlightCard: FC<FlightCardProps> = ({
                 </span>
                 <span className="flight-card__detail-value">{arrScheduled}</span>
               </div>
-              {arrActual && (
+              {arrLatest && (
                 <div>
                   <span className="flight-card__detail-caption">
-                    {t("SHARED.ACTUAL")}
+                    {t(arrLatestCaptionKey)}
                   </span>
-                  <span className="flight-card__detail-value">{arrActual}</span>
+                  <span className="flight-card__detail-value">{arrLatest}</span>
                 </div>
               )}
             </div>

src/ui/flights/TimeGroup.scss

@@ -12,6 +12,18 @@
     align-items: flex-start;
   }
 
+  // Angular's time-group renders the 'big' time at size 30 / weight 300
+  // (light) and keeps the old scheduled time small + orange + strikethrough
+  // (`text size=12 color=orange`). Apply those dimensions directly on the
+  // spans so callers don't need to override font-size.
+  &__actual,
+  &__scheduled {
+    font-size: 30px;
+    font-weight: 300;
+    color: #333;
+    line-height: 1.15;
+  }
+
   &__actual {
     display: flex;
     align-items: flex-start;
@@ -29,6 +41,10 @@
 
   &__old-time,
   &__scheduled--delayed {
+    font-size: 12px;
+    font-weight: 400;
+    color: #f37b09;
+    line-height: 1.3;
     text-decoration: line-through;
   }
 

src/ui/flights/TimeGroup.tsx

@@ -39,10 +39,10 @@ export const TimeGroup: FC<TimeGroupProps> = ({
       <div className="time-group__times">
         {hasDelay ? (
           <>
+            <span className="time-group__actual">{actualTime}</span>
             <span className="time-group__scheduled time-group__scheduled--delayed">
               {scheduledTime}
             </span>
-            <span className="time-group__actual">{actualTime}</span>
           </>
         ) : (
           <span className="time-group__scheduled">{scheduledTime}</span>