compact vehicle card passport

web/static/styles.css

@@ -70,6 +70,7 @@ body.auth-required .shell {
 }
 
 .passport-head small,
+.passport-metric small,
 .passport-metric span,
 .passport-action span,
 .achievement-card span,
@@ -134,6 +135,11 @@ body.auth-required .shell {
   font-size: 14px;
 }
 
+.passport-metric-combo small {
+  display: block;
+  margin-top: 2px;
+}
+
 .passport-grid,
 .passport-actions,
 .achievement-strip {
@@ -816,6 +822,36 @@ select:disabled {
   color: var(--muted);
 }
 
+.car-key-params {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 9px;
+}
+
+.car-key-param {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding: 7px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+}
+
+.car-key-param span {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.car-key-param strong {
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
 .car-item.active {
   border-color: rgba(22, 128, 106, 0.48);
   background: #e5f4ef;
@@ -2159,6 +2195,12 @@ select {
     white-space: nowrap;
   }
 
+  .car-key-param strong {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
   .passport-head {
     display: grid;
     grid-template-columns: 1fr auto;