@eveshipfit/ui-ingame 1.6.0 → 1.8.0

package/dist/style.css

@@ -44,6 +44,85 @@
 .kwi1cG_content {
   padding: 10px;
 }
+.cmKEiW_anchor {
+  display: contents;
+}
+
+.cmKEiW_anchor > :first-child {
+  anchor-name: var(--tooltip-anchor);
+}
+
+.cmKEiW_tooltip {
+  --notch-size: 10px;
+  --notch-reach: calc(var(--notch-size) * .71 + 1px);
+  anchor-name: var(--tooltip-box);
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: var(--esf-font-size);
+  margin: var(--notch-reach) 0;
+  opacity: .9;
+  pointer-events: none;
+  position-anchor: var(--tooltip-anchor);
+  position-area: top;
+  position-try-fallbacks: flip-block;
+  background: none;
+  border: none;
+  max-width: 320px;
+  padding: 0;
+  inset: auto;
+  overflow: visible;
+}
+
+.cmKEiW_notch, .cmKEiW_label {
+  background: var(--esf-bg);
+  border: 1px solid var(--esf-border);
+}
+
+.cmKEiW_notch, .cmKEiW_label:after {
+  --edge: clamp(anchor(var(--tooltip-box) top),
+    anchor(var(--tooltip-anchor) center),
+    anchor(var(--tooltip-box) bottom));
+  left: clamp(anchor(var(--tooltip-box) left) + var(--notch-size),
+    anchor(var(--tooltip-anchor) center),
+    anchor(var(--tooltip-box) right) - var(--notch-size));
+  position: fixed;
+}
+
+.cmKEiW_notch {
+  height: var(--notch-size);
+  top: var(--edge);
+  width: var(--notch-size);
+  translate: -50% -50%;
+  rotate: 45deg;
+}
+
+.cmKEiW_label {
+  padding: 8px 14px;
+  display: block;
+  position: relative;
+}
+
+.cmKEiW_label:after {
+  background: var(--esf-bg);
+  content: "";
+  height: 1px;
+  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
+  width: calc(var(--notch-size) * 1.41 - 2px);
+  translate: -50%;
+}
+
+.cmKEiW_text {
+  gap: 8px;
+  display: grid;
+}
+
+.cmKEiW_text + .cmKEiW_text {
+  margin-top: 12px;
+}
+
+.cmKEiW_title {
+  font-weight: 600;
+}
 .a4KCwW_icon {
   height: var(--size);
   isolation: isolate;
@@ -162,85 +241,6 @@
 .CUz0fa_icon {
   flex: none;
 }
-.cmKEiW_anchor {
-  display: contents;
-}
-
-.cmKEiW_anchor > :first-child {
-  anchor-name: var(--tooltip-anchor);
-}
-
-.cmKEiW_tooltip {
-  --notch-size: 10px;
-  --notch-reach: calc(var(--notch-size) * .71 + 1px);
-  anchor-name: var(--tooltip-box);
-  color: var(--esf-text);
-  font-family: var(--esf-font);
-  font-size: var(--esf-font-size);
-  margin: var(--notch-reach) 0;
-  opacity: .9;
-  pointer-events: none;
-  position-anchor: var(--tooltip-anchor);
-  position-area: top;
-  position-try-fallbacks: flip-block;
-  background: none;
-  border: none;
-  max-width: 320px;
-  padding: 0;
-  inset: auto;
-  overflow: visible;
-}
-
-.cmKEiW_notch, .cmKEiW_label {
-  background: var(--esf-bg);
-  border: 1px solid var(--esf-border);
-}
-
-.cmKEiW_notch, .cmKEiW_label:after {
-  --edge: clamp(anchor(var(--tooltip-box) top),
-    anchor(var(--tooltip-anchor) center),
-    anchor(var(--tooltip-box) bottom));
-  left: clamp(anchor(var(--tooltip-box) left) + var(--notch-size),
-    anchor(var(--tooltip-anchor) center),
-    anchor(var(--tooltip-box) right) - var(--notch-size));
-  position: fixed;
-}
-
-.cmKEiW_notch {
-  height: var(--notch-size);
-  top: var(--edge);
-  width: var(--notch-size);
-  translate: -50% -50%;
-  rotate: 45deg;
-}
-
-.cmKEiW_label {
-  padding: 8px 14px;
-  display: block;
-  position: relative;
-}
-
-.cmKEiW_label:after {
-  background: var(--esf-bg);
-  content: "";
-  height: 1px;
-  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
-  width: calc(var(--notch-size) * 1.41 - 2px);
-  translate: -50%;
-}
-
-.cmKEiW_text {
-  gap: 8px;
-  display: grid;
-}
-
-.cmKEiW_text + .cmKEiW_text {
-  margin-top: 12px;
-}
-
-.cmKEiW_title {
-  font-weight: 600;
-}
 .hmBNwq_toggle {
   --toggle-unit: calc(1px * var(--esf-scale, 1));
   border: var(--toggle-unit) solid transparent;
@@ -264,6 +264,13 @@
   flex: none;
 }
 
+.hmBNwq_toggle > .hmBNwq_image {
+  filter: grayscale() brightness(1.3);
+  height: calc(22 * var(--toggle-unit));
+  opacity: .7;
+  width: calc(22 * var(--toggle-unit));
+}
+
 .hmBNwq_toggle[aria-pressed="true"] {
   border-color: var(--esf-button-active-edge);
 }
@@ -347,12 +354,12 @@
 
 .UlfhFa_entries {
   background: var(--esf-history-bg);
-  border: var(--history-unit) solid var(--esf-history-border);
+  border: round(var(--history-unit), 1px) solid var(--esf-history-border);
   box-sizing: border-box;
   align-items: center;
-  gap: calc(3 * var(--history-unit));
-  height: calc(17 * var(--history-unit));
-  padding: 0 calc(2 * var(--history-unit));
+  gap: round(calc(3 * var(--history-unit)), 1px);
+  height: round(calc(17 * var(--history-unit)), 1px);
+  padding: 0 round(calc(2 * var(--history-unit)), 1px);
   width: calc(282 * var(--history-unit));
   display: flex;
   overflow: hidden;
@@ -361,8 +368,8 @@
 .UlfhFa_entry {
   background: var(--esf-history-entry);
   cursor: pointer;
-  height: calc(11 * var(--history-unit));
-  width: calc(7 * var(--history-unit));
+  height: round(calc(11 * var(--history-unit)), 1px);
+  width: round(calc(7 * var(--history-unit)), 1px);
   border: none;
   flex: none;
   padding: 0;
@@ -589,13 +596,18 @@
   pointer-events: auto;
 }
 
+.T6VD6G_slot > .T6VD6G_actions[inert] {
+  opacity: 0;
+}
+
 .T6VD6G_bridge {
+  --width: calc(var(--slot-size) * (.797 - .203) * var(--wheel-unit));
   height: calc((var(--slot-centre) - var(--innermost)) * var(--wheel-unit));
-  left: calc(50% - var(--action-size) / 2 * var(--wheel-unit));
+  left: calc(50% - var(--width) / 2);
   top: calc(50% - var(--slot-centre) * var(--wheel-unit));
   transform: rotate(var(--angle));
   transform-origin: 50% calc(var(--slot-centre) * var(--wheel-unit));
-  width: calc(var(--action-size) * var(--wheel-unit));
+  width: var(--width);
   z-index: -1;
   position: absolute;
 }
@@ -730,33 +742,55 @@
 
 .m18XbW_header {
   background: var(--esf-stats-header);
+  align-items: center;
+  gap: calc(8 * var(--section-unit));
+  height: calc(20 * var(--section-unit));
+  padding: 0 calc(14 * var(--section-unit)) 0 calc(4 * var(--section-unit));
+  display: flex;
+  position: relative;
+}
+
+.m18XbW_header:has(.m18XbW_toggle:focus-visible) {
+  outline: var(--section-unit) solid var(--esf-text);
+}
+
+.m18XbW_toggle {
   color: inherit;
   cursor: default;
   font: inherit;
-  height: calc(20 * var(--section-unit));
-  padding: 0 calc(14 * var(--section-unit)) 0 calc(4 * var(--section-unit));
   text-align: left;
+  background: none;
   border: none;
+  outline: none;
+  flex: 1;
+  align-self: stretch;
   align-items: center;
-  width: 100%;
+  min-width: 0;
+  padding: 0;
   display: flex;
 }
 
-.m18XbW_header:focus-visible {
-  outline: var(--section-unit) solid var(--esf-text);
+.m18XbW_toggle:after {
+  content: "";
+  position: absolute;
+  inset: 0;
 }
 
-.m18XbW_header > img {
+.m18XbW_toggle > img {
   height: calc(10 * var(--section-unit));
   margin-right: calc(4 * var(--section-unit));
   width: calc(10 * var(--section-unit));
   transition: transform .15s;
 }
 
-.m18XbW_section[data-closed] .m18XbW_header > img {
+.m18XbW_section[data-closed] .m18XbW_toggle > img {
   transform: rotate(-90deg);
 }
 
+.m18XbW_action {
+  position: relative;
+}
+
 .m18XbW_title {
   flex: 1;
 }
@@ -788,7 +822,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .m18XbW_header > img, .m18XbW_body, .m18XbW_clip {
+  .m18XbW_toggle > img, .m18XbW_body, .m18XbW_clip {
     transition: none;
   }
 }
@@ -856,6 +890,21 @@
 ._6LFjiq_cell[data-lit] {
   background: var(--lit);
 }
+.tsr2Sa_hint {
+  height: var(--wheel-texture-size);
+  left: calc(50% - var(--wheel-texture-size) / 2);
+  pointer-events: none;
+  top: calc(50% - var(--wheel-texture-size) / 2);
+  width: var(--wheel-texture-size);
+  position: absolute;
+  overflow: visible;
+}
+
+.tsr2Sa_text {
+  fill: #cdcdcd;
+  letter-spacing: .05em;
+  font-size: 11px;
+}
 ._9_b9FW_modes {
   pointer-events: none;
   position: absolute;
@@ -919,6 +968,146 @@
   display: block;
   position: relative;
 }
+.BVBbxW_track {
+  fill: none;
+  pointer-events: none;
+  stroke: #ffffff12;
+  stroke-linecap: round;
+  stroke-width: 39px;
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+.BVBbxW_marker {
+  height: calc(30 * var(--wheel-unit));
+  margin: calc(-15 * var(--wheel-unit));
+  width: calc(30 * var(--wheel-unit));
+  position: absolute;
+}
+
+.BVBbxW_marker img {
+  opacity: .8;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.BVBbxW_marker img[data-marker="booster"] {
+  filter: grayscale() brightness(1.3);
+  margin: calc(4 * var(--wheel-unit));
+  opacity: .7;
+  width: calc(22 * var(--wheel-unit));
+  height: calc(22 * var(--wheel-unit));
+}
+
+.BVBbxW_slot {
+  height: calc(32 * var(--wheel-unit));
+  margin: calc(-16 * var(--wheel-unit));
+  width: calc(32 * var(--wheel-unit));
+  position: absolute;
+}
+
+.BVBbxW_body {
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.BVBbxW_frame {
+  fill: #0d1213;
+  stroke: #2b3337;
+  stroke-linejoin: round;
+  stroke-width: 1px;
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+.BVBbxW_slot[data-filled] .BVBbxW_frame {
+  stroke: #3d5960;
+}
+
+.BVBbxW_slot[data-preview] .BVBbxW_frame {
+  filter: drop-shadow(0 0 calc(4 * var(--wheel-unit)) var(--esf-button-active-edge));
+  stroke: var(--esf-button-active-edge);
+}
+
+.BVBbxW_icon {
+  border-radius: calc(3 * var(--wheel-unit));
+  height: calc(28 * var(--wheel-unit));
+  width: calc(28 * var(--wheel-unit));
+  position: relative;
+  overflow: hidden;
+}
+
+.BVBbxW_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.BVBbxW_press {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.BVBbxW_press:focus-visible {
+  outline: none;
+}
+
+.BVBbxW_slot:has(.BVBbxW_press:hover) .BVBbxW_frame, .BVBbxW_slot:has(.BVBbxW_press:focus-visible) .BVBbxW_frame {
+  stroke: var(--esf-text-muted);
+}
+
+.BVBbxW_number {
+  color: var(--esf-text-muted);
+  font-family: var(--esf-font);
+  font-size: calc(12.52 * var(--wheel-unit));
+  opacity: .6;
+  position: relative;
+}
+
+.BVBbxW_actions {
+  opacity: 0;
+  pointer-events: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.BVBbxW_slot:hover > .BVBbxW_actions, .BVBbxW_slot:has(:focus-visible) > .BVBbxW_actions {
+  opacity: 1;
+}
+
+.BVBbxW_slot:hover :is(.BVBbxW_action, .BVBbxW_bridge), .BVBbxW_slot:has(:focus-visible) :is(.BVBbxW_action, .BVBbxW_bridge) {
+  pointer-events: auto;
+}
+
+.BVBbxW_action {
+  height: calc(12.97 * var(--wheel-unit));
+  left: calc(50% + var(--x) * var(--wheel-unit));
+  margin: calc(-6.49 * var(--wheel-unit));
+  top: calc(50% + var(--y) * var(--wheel-unit));
+  width: calc(12.97 * var(--wheel-unit));
+  position: absolute;
+}
+
+.BVBbxW_bridge {
+  height: calc(8 * var(--wheel-unit));
+  left: calc(50% + var(--x) * var(--wheel-unit));
+  margin: calc(-4 * var(--wheel-unit));
+  top: calc(50% + var(--y) * var(--wheel-unit));
+  width: calc(8 * var(--wheel-unit));
+  position: absolute;
+}
 ._f5iUa_tooltip {
   gap: 8px;
   display: grid;
@@ -1008,94 +1197,351 @@
   position: relative;
 }
 
-.R9jwpW_slot:hover, .R9jwpW_slot:has(:focus-visible) {
-  z-index: 1;
+.R9jwpW_slot:hover, .R9jwpW_slot:has(:focus-visible) {
+  z-index: 1;
+}
+
+.R9jwpW_body {
+  user-select: none;
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_body:before {
+  background: var(--texture) center / 100% 100%;
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_icon, .R9jwpW_empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.R9jwpW_icon {
+  height: calc(36 * var(--service-unit));
+  width: calc(36 * var(--service-unit));
+}
+
+.R9jwpW_icon > span, .R9jwpW_empty > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.R9jwpW_empty {
+  height: calc(32 * var(--service-unit));
+  width: calc(32 * var(--service-unit));
+}
+
+.R9jwpW_press {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_press:focus-visible {
+  outline: var(--service-unit) solid var(--esf-text);
+}
+
+.R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
+  opacity: .4;
+}
+
+.R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
+  opacity: .3;
+}
+
+.R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
+  opacity: .1;
+}
+
+.R9jwpW_slot[data-preview] .R9jwpW_icon {
+  filter: sepia() hue-rotate(190deg) saturate(200%);
+}
+
+.R9jwpW_actions {
+  opacity: 0;
+  padding: 0 0 var(--service-unit);
+  pointer-events: none;
+  border: none;
+  flex-direction: column-reverse;
+  margin: 0;
+  display: flex;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  translate: -50%;
+}
+
+.R9jwpW_slot:hover > .R9jwpW_actions, .R9jwpW_slot:has(:focus-visible) > .R9jwpW_actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.R9jwpW_slot > .R9jwpW_actions[inert] {
+  opacity: 0;
+}
+
+.R9jwpW_action {
+  height: calc(15.5 * var(--service-unit));
+  width: calc(15.5 * var(--service-unit));
+}
+.TufZMa_card {
+  --info-unit: calc(1px * var(--esf-scale, 1));
+  background: var(--esf-bg);
+  border: 1px solid var(--esf-border);
+  box-shadow: 0 calc(8 * var(--info-unit)) calc(30 * var(--info-unit)) #0009;
+  box-sizing: border-box;
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  max-height: min(calc(460 * var(--info-unit)), calc(100vh - 16px));
+  padding: calc(10 * var(--info-unit)) calc(12 * var(--info-unit)) calc(6 * var(--info-unit));
+  user-select: text;
+  width: calc(330 * var(--info-unit));
+  flex-direction: column;
+  margin: auto;
+  inset: 0;
+}
+
+.TufZMa_card:popover-open {
+  display: flex;
+}
+
+.TufZMa_card[data-side] {
+  margin: 0 calc(8 * var(--info-unit));
+  position-anchor: var(--item-info-anchor);
+  position-try-fallbacks: flip-block,
+    flip-inline,
+    flip-block flip-inline;
+  inset: auto;
+}
+
+.TufZMa_card[data-side="left"] {
+  position-area: left span-bottom;
+}
+
+.TufZMa_card[data-side="right"] {
+  position-area: right span-bottom;
+}
+
+.TufZMa_close {
+  cursor: pointer;
+  opacity: .6;
+  right: calc(8 * var(--info-unit));
+  top: calc(8 * var(--info-unit));
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  position: absolute;
+}
+
+.TufZMa_close:hover, .TufZMa_close:focus-visible {
+  opacity: 1;
+}
+
+.TufZMa_close > img {
+  height: calc(14 * var(--info-unit));
+  width: calc(14 * var(--info-unit));
+}
+
+.TufZMa_header {
+  align-items: center;
+  gap: calc(10 * var(--info-unit));
+  padding-right: calc(16 * var(--info-unit));
+  display: flex;
+}
+
+.TufZMa_typeIcon {
+  height: calc(64 * var(--info-unit));
+  width: calc(64 * var(--info-unit));
+  flex: none;
+}
+
+.TufZMa_typeIcon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.TufZMa_title {
+  gap: calc(2 * var(--info-unit));
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.TufZMa_name {
+  font-size: inherit;
+  margin: 0;
+  font-weight: normal;
+}
+
+.TufZMa_muted {
+  color: var(--esf-text-muted);
+}
+
+.TufZMa_tabs {
+  border-bottom: 1px solid var(--esf-input-border);
+  gap: calc(16 * var(--info-unit));
+  margin-top: calc(8 * var(--info-unit));
+  display: flex;
+}
+
+.TufZMa_tab {
+  color: var(--esf-text-muted);
+  font: inherit;
+  padding: calc(4 * var(--info-unit)) 0 calc(6 * var(--info-unit));
+  background: none;
+  border: none;
+}
+
+.TufZMa_tab[aria-selected="true"] {
+  box-shadow: inset 0 calc(-2 * var(--info-unit)) var(--esf-button-active-edge);
+  color: var(--esf-text);
+}
+
+.TufZMa_panel {
+  flex-direction: column;
+  min-height: 0;
+  display: flex;
+}
+
+.TufZMa_list {
+  font-size: calc(11 * var(--info-unit));
+  margin: calc(4 * var(--info-unit)) calc(-12 * var(--info-unit)) 0;
+  min-height: 0;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
+}
+
+.TufZMa_row {
+  align-items: center;
+  gap: calc(8 * var(--info-unit));
+  min-height: calc(26 * var(--info-unit));
+  padding: 0 calc(12 * var(--info-unit));
+  justify-content: space-between;
+  display: flex;
+}
+
+.TufZMa_row:hover {
+  background: var(--esf-tree-hover);
+}
+
+.TufZMa_row > dt {
+  align-items: center;
+  gap: calc(6 * var(--info-unit));
+  min-width: 0;
+  display: flex;
+}
+
+.TufZMa_row > dt > span:last-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-.R9jwpW_body {
-  user-select: none;
-  position: absolute;
-  inset: 0;
+.TufZMa_row > dd {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+  margin: 0;
 }
 
-.R9jwpW_body:before {
-  background: var(--texture) center / 100% 100%;
-  content: "";
-  position: absolute;
-  inset: 0;
+.TufZMa_icon {
+  height: calc(16 * var(--info-unit));
+  width: calc(16 * var(--info-unit));
+  flex: none;
 }
 
-.R9jwpW_icon, .R9jwpW_empty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
+.TufZMa_row > dd[data-change="better"] {
+  color: var(--esf-good);
 }
 
-.R9jwpW_icon {
-  height: calc(36 * var(--service-unit));
-  width: calc(36 * var(--service-unit));
+.TufZMa_row > dd[data-change="worse"] {
+  color: var(--esf-bad);
 }
 
-.R9jwpW_icon > span, .R9jwpW_empty > img {
-  width: 100%;
-  height: 100%;
-  display: block;
+.TufZMa_metaGroup {
+  background: var(--esf-tree-header);
+  font-size: inherit;
+  margin: calc(4 * var(--info-unit)) 0 0;
+  padding: calc(5 * var(--info-unit)) calc(12 * var(--info-unit));
+  font-weight: normal;
 }
 
-.R9jwpW_empty {
-  height: calc(32 * var(--service-unit));
-  width: calc(32 * var(--service-unit));
+.TufZMa_variations {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.R9jwpW_press {
-  cursor: pointer;
-  position: absolute;
-  inset: 0;
+.TufZMa_row[aria-current="true"] {
+  background: var(--esf-tab-active);
 }
 
-.R9jwpW_press:focus-visible {
-  outline: var(--service-unit) solid var(--esf-text);
+.TufZMa_variation {
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  align-items: center;
+  gap: calc(6 * var(--info-unit));
+  text-align: left;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  display: flex;
 }
 
-.R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
-  opacity: .4;
+.TufZMa_variation > span:last-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-.R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
-  opacity: .3;
+.TufZMa_row:has(.TufZMa_variation:focus-visible) {
+  background: var(--esf-tree-hover);
 }
 
-.R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
-  opacity: .1;
+.TufZMa_variationIcon {
+  height: calc(24 * var(--info-unit));
+  width: calc(24 * var(--info-unit));
+  flex: none;
 }
 
-.R9jwpW_slot[data-preview] .R9jwpW_icon {
-  filter: sepia() hue-rotate(190deg) saturate(200%);
+.TufZMa_variationIcon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
-.R9jwpW_actions {
-  opacity: 0;
-  padding: 0 0 var(--service-unit);
-  pointer-events: none;
+.TufZMa_info {
+  cursor: pointer;
+  opacity: .6;
+  background: none;
   border: none;
-  flex-direction: column-reverse;
-  margin: 0;
+  flex: none;
+  padding: 0;
   display: flex;
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  translate: -50%;
 }
 
-.R9jwpW_slot:hover > .R9jwpW_actions, .R9jwpW_slot:has(:focus-visible) > .R9jwpW_actions {
+.TufZMa_info:hover, .TufZMa_info:focus-visible {
   opacity: 1;
-  pointer-events: auto;
 }
 
-.R9jwpW_action {
-  height: calc(15.5 * var(--service-unit));
-  width: calc(15.5 * var(--service-unit));
+.TufZMa_info > img {
+  height: calc(16 * var(--info-unit));
+  width: calc(16 * var(--info-unit));
 }
 .gVdevq_panel {
   background: var(--esf-menu-bg);
@@ -1579,7 +2025,7 @@
 }
 
 .L9t91q_window[data-statistics] {
-  --statistics-width: calc(264 * var(--window-unit));
+  --statistics-width: calc(272 * var(--window-unit));
 }
 
 .L9t91q_frame {
@@ -1600,6 +2046,16 @@
   top: 0;
 }
 
+.L9t91q_placeholder {
+  color: var(--esf-text-muted);
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
 .L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_services, .L9t91q_resources {
   position: absolute;
 }
@@ -1884,7 +2340,7 @@
 }
 
 .L9t91q_statistics {
-  left: calc(692 * var(--window-unit) + var(--browser-width));
+  left: calc(700 * var(--window-unit) + var(--browser-width));
   width: calc(280 * var(--window-unit));
   transition: left .2s;
 }
@@ -2270,6 +2726,24 @@
   gap: 8px;
   display: flex;
 }
+
+.xFSZwa_views {
+  margin: 0 0 0 calc(4 * var(--browser-unit));
+  border: none;
+  align-self: stretch;
+  min-width: 0;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_views button {
+  align-items: center;
+}
+
+.xFSZwa_views [aria-pressed="true"] {
+  background: var(--esf-tab-active);
+  opacity: 1;
+}
 .lebA7G_statistics {
   --statistics-unit: calc(1px * var(--esf-scale, 1));
   color: var(--esf-text);
@@ -2363,12 +2837,12 @@
   column-gap: calc(6 * var(--defense-unit));
   grid-auto-rows: calc(32 * var(--defense-unit));
   grid-template-columns: 1fr repeat(4, calc(40 * var(--defense-unit)));
-  grid-template-rows: calc(26 * var(--defense-unit));
+  grid-template-rows: calc(26 * var(--defense-unit)) calc(4 * var(--defense-unit));
   padding-right: calc(10 * var(--defense-unit));
   display: grid;
 }
 
-.lebA7G_defense > img {
+.lebA7G_defense > span > img {
   height: calc(22 * var(--defense-unit));
   margin-left: calc(4 * var(--defense-unit));
   width: calc(22 * var(--defense-unit));
@@ -2453,3 +2927,204 @@
   height: calc(24 * var(--repair-rate-unit));
   width: calc(24 * var(--repair-rate-unit));
 }
+
+.lebA7G_share {
+  --colour: var(--esf-damage-em);
+  background: linear-gradient(to right, var(--colour) calc(var(--share) * 100%), var(--esf-resistance-bg) 0);
+  height: calc(3 * var(--share-unit, var(--defense-unit)));
+  align-self: start;
+}
+
+.lebA7G_share[data-damage="thermal"] {
+  --colour: var(--esf-damage-thermal);
+}
+
+.lebA7G_share[data-damage="kinetic"] {
+  --colour: var(--esf-damage-kinetic);
+}
+
+.lebA7G_share[data-damage="explosive"] {
+  --colour: var(--esf-damage-explosive);
+}
+
+.lebA7G_damageProfile {
+  --damage-profile-unit: calc(1px * var(--esf-scale, 1));
+  display: flex;
+}
+
+.lebA7G_damageProfilePicker {
+  anchor-name: var(--damage-profile-anchor);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  align-items: center;
+  gap: calc(4 * var(--damage-profile-unit));
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+}
+
+.lebA7G_damageProfilePicker:focus-visible {
+  outline: var(--damage-profile-unit) solid var(--esf-text);
+}
+
+.lebA7G_damageProfileName {
+  max-width: calc(110 * var(--damage-profile-unit));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.lebA7G_damageProfilePicker > img {
+  height: calc(10 * var(--damage-profile-unit));
+  width: calc(10 * var(--damage-profile-unit));
+}
+
+.lebA7G_damageProfileMenu {
+  background: var(--esf-menu-bg);
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  max-width: calc(260 * var(--damage-profile-unit));
+  min-width: calc(172 * var(--damage-profile-unit));
+  position-anchor: var(--damage-profile-anchor);
+  inset: auto;
+  right: anchor(right);
+  top: calc(anchor(bottom) + 3 * var(--damage-profile-unit));
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.lebA7G_damageProfileMenu button {
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(26 * var(--damage-profile-unit));
+  padding: 0 calc(8 * var(--damage-profile-unit));
+  white-space: nowrap;
+  background: none;
+  border: none;
+}
+
+.lebA7G_damageProfileMenu button:hover, .lebA7G_damageProfileMenu button:focus-visible {
+  background: var(--esf-menu-hover);
+  outline: none;
+}
+
+.lebA7G_pick {
+  text-align: left;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+}
+
+.lebA7G_pick[aria-pressed="true"] {
+  color: var(--esf-flyable);
+}
+
+.lebA7G_custom {
+  display: flex;
+}
+
+.lebA7G_damageProfileMenu .lebA7G_edit {
+  opacity: .6;
+  align-items: center;
+  display: flex;
+}
+
+.lebA7G_damageProfileMenu .lebA7G_edit:hover, .lebA7G_damageProfileMenu .lebA7G_edit:focus-visible {
+  opacity: 1;
+}
+
+.lebA7G_edit > img {
+  height: calc(16 * var(--damage-profile-unit));
+  width: calc(16 * var(--damage-profile-unit));
+}
+
+.lebA7G_rule {
+  border: none;
+  border-top: var(--damage-profile-unit) solid var(--esf-border);
+  margin: calc(2 * var(--damage-profile-unit)) 0;
+}
+
+.lebA7G_profileForm {
+  flex-direction: column;
+  gap: 8px;
+  width: min(300px, 80vw);
+  display: flex;
+}
+
+.lebA7G_profileForm > label {
+  color: var(--esf-text-muted);
+}
+
+.lebA7G_profileForm input {
+  background: var(--esf-input-bg);
+  border: 1px solid var(--esf-input-border);
+  color: var(--esf-text);
+  font: inherit;
+}
+
+.lebA7G_formError {
+  color: var(--esf-bad);
+  margin: 0;
+}
+
+.lebA7G_amounts {
+  --share-unit: 1px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px 8px;
+  margin-top: 4px;
+  display: grid;
+}
+
+.lebA7G_amount {
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
+
+.lebA7G_amount > img {
+  width: 22px;
+  height: 22px;
+}
+
+.lebA7G_amount > input {
+  width: 100%;
+  min-width: 0;
+}
+
+.lebA7G_dialogButtons {
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+  display: flex;
+}
+
+.lebA7G_action {
+  background: var(--esf-button);
+  border: 1px solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: pointer;
+  font: inherit;
+  min-width: 80px;
+  height: 32px;
+  padding: 0 16px;
+}
+
+.lebA7G_action:hover:not(:disabled), .lebA7G_action:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+}
+
+.lebA7G_action:disabled {
+  color: var(--esf-text-muted);
+  cursor: default;
+}
+
+.lebA7G_delete {
+  color: var(--esf-bad);
+  margin-right: auto;
+}