Refactor inline styles to CSS rules

css/tailwind.source.css

@@ -448,6 +448,11 @@
   .popover-panel,
   .popover__panel {
     @apply focus-ring pointer-events-none z-overlay-popover min-w-menu max-w-popover-safe scale-95 rounded-overlay border border-border border-opacity-40 bg-overlay-panel px-overlay-panel-inline py-overlay-panel-block text-sm text-text opacity-0 shadow-overlay-panel transition-opacity transition-transform duration-base ease-out;
+    position: var(--popover-strategy, fixed);
+    left: var(--popover-left, 0px);
+    top: var(--popover-top, 0px);
+    max-width: var(--popover-max-width, none);
+    max-height: var(--popover-max-height, none);
   }
 
   .popover-panel[data-state="open"],
@@ -460,6 +465,13 @@
     @apply pointer-events-none scale-95 opacity-0;
   }
 
+  [data-popover-arrow="true"] {
+    left: var(--popover-arrow-left, auto);
+    right: var(--popover-arrow-right, auto);
+    top: var(--popover-arrow-top, auto);
+    bottom: var(--popover-arrow-bottom, auto);
+  }
+
   .p-overlay-panel {
     @apply px-overlay-panel-inline py-overlay-panel-block;
   }
@@ -808,6 +820,10 @@
     @apply inline-flex flex-col items-start gap-sm rounded-xl border px-3 py-1.5 text-xs font-semibold normal-case tracking-tight shadow-sm;
   }
 
+  .moderation-badge--interactive {
+    pointer-events: auto;
+  }
+
   .moderation-badge__actions {
     @apply inline-flex flex-nowrap items-center gap-sm;
   }
@@ -2104,6 +2120,9 @@
     @apply relative block shrink-0 overflow-hidden rounded-lg bg-surface-alt;
     width: 168px;
     aspect-ratio: 16 / 9;
+    background-image: var(--similar-card-thumb-url, none);
+    background-position: center;
+    background-size: cover;
   }
 
   @media (max-width: theme("screens.sm")) {
@@ -2126,6 +2145,7 @@
 
   .player-modal__similar-card-title {
     @apply text-sm font-semibold leading-snug text-text transition-colors duration-base ease-out;
+    min-width: 0;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -2160,6 +2180,7 @@
 
   .player-modal__similar-card-meta {
     @apply flex flex-wrap items-center gap-1 text-2xs text-muted-strong;
+    min-width: 0;
   }
 
   .player-modal__similar-card-timestamp {
@@ -2442,6 +2463,8 @@
     inset-block-start: 0;
     block-size: 100%;
     max-inline-size: 100%;
+    inline-size: var(--video-modal-reaction-fill, 0%);
+    width: var(--video-modal-reaction-fill, 0%);
     background-image: linear-gradient(
       90deg,
       var(--color-accent) 0%,
@@ -3338,6 +3361,7 @@
   .qr-code__table {
     border: 0;
     border-collapse: collapse;
+    margin: var(--qr-code-table-margin, 0);
   }
 
   .qr-code__cell {
@@ -3354,6 +3378,22 @@
     background-color: var(--qr-code-color-dark);
   }
 
+  .qr-code__container[data-qr-code-mode="image"] .qr-code__canvas {
+    display: none;
+  }
+
+  .qr-code__container[data-qr-code-mode="image"] .qr-code__image {
+    display: block;
+  }
+
+  .qr-code__container[data-qr-code-mode="canvas"] .qr-code__canvas {
+    display: block;
+  }
+
+  .qr-code__container[data-qr-code-mode="canvas"] .qr-code__image {
+    display: none;
+  }
+
   .fade-in {
     opacity: 0;
     animation: interface-fade-in 280ms ease-out forwards;
@@ -3568,18 +3608,26 @@
     z-index: var(--z-modal-content);
   }
 
-  #modalContainer > #profileModal {
+  #modalContainer > #profileModal,
+  #profileModal[data-modal-stack="top"] {
     z-index: var(--z-modal-top-root);
   }
 
-  #modalContainer > #profileModal > .bv-modal-backdrop {
+  #modalContainer > #profileModal > .bv-modal-backdrop,
+  #profileModal[data-modal-stack="top"] > .bv-modal-backdrop {
     z-index: var(--z-modal-top-overlay);
   }
 
-  #modalContainer > #profileModal .bv-modal__panel {
+  #modalContainer > #profileModal .bv-modal__panel,
+  #profileModal[data-modal-stack="top"] .bv-modal__panel {
     z-index: var(--z-modal-top-content);
   }
 
+  .bv-modal[data-nested-modal-active="true"] {
+    pointer-events: none;
+    visibility: hidden;
+  }
+
   #modalContainer > #loginModal {
     z-index: var(--z-modal-peak-root);
   }
@@ -4389,6 +4437,26 @@
     scrollbar-gutter: stable both-edges;
   }
 
+  .sidebar-dropup-panel__inner.is-measuring {
+    position: absolute;
+    width: max-content;
+    max-width: none;
+    visibility: hidden;
+    pointer-events: none;
+    left: -9999px;
+    right: auto;
+    top: auto;
+    bottom: auto;
+  }
+
+  .sidebar-dropup-measure {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    height: 0;
+    overflow: hidden;
+  }
+
   .sidebar-dropup-panel__inner > * {
     width: 100%;
     min-width: 0;