@ebay/skin 18.2.3 → 18.3.0

package/dist/bundles/skin-headless.css

@@ -494,6 +494,11 @@ a.fake-btn,button.btn{
 a.fake-btn--fixed-height,a.fake-btn--truncated,button.btn--fixed-height,button.btn--truncated{
   height:40px;
 }
+a.fake-btn:focus-visible,button.btn:focus-visible{
+  outline-offset:var(--spacing-25);
+  outline-style:solid;
+  outline-width:var(--spacing-25);
+}
 a.fake-btn:focus:not(:focus-visible),button.btn:focus:not(:focus-visible){
   outline:none;
 }
@@ -571,12 +576,10 @@ a.fake-btn svg.icon,button.btn svg.icon{
   align-self:center;
 }
 a.fake-btn svg.icon:first-child,button.btn svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 a.fake-btn svg.icon:last-child,button.btn svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 a.fake-btn svg.icon:only-child,button.btn svg.icon:only-child{
   margin:0;
@@ -1037,13 +1040,11 @@ div.carousel{
 }
 .carousel__control--prev{
   left:calc(var(--spacing-200)*-1);
-  -webkit-margin-end:1px;
-          margin-inline-end:1px;
+  margin-inline-end:1px;
 }
 .carousel__control--next{
+  margin-inline-start:1px;
   right:calc(var(--spacing-200)*-1);
-  -webkit-margin-start:1px;
-          margin-inline-start:1px;
 }
 .carousel__control svg{
   color:var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
@@ -1355,8 +1356,7 @@ span.carousel,span.carousel__container{
   content:"";
   display:inline-block;
   height:10px;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
   width:10px;
 }
 
@@ -1509,8 +1509,7 @@ button.chip__button{
   flex-shrink:0;
   height:var(--spacing-300);
   line-height:0;
-  -webkit-margin-end:-8px;
-          margin-inline-end:-8px;
+  margin-inline-end:-8px;
   padding:0;
   width:var(--spacing-300);
 }
@@ -1536,10 +1535,8 @@ button.chip__button>svg{
   border-radius:var(--border-radius-50);
   display:inline-block;
   padding-bottom:var(--spacing-100);
-  -webkit-padding-end:var(--spacing-200);
-          padding-inline-end:var(--spacing-200);
-  -webkit-padding-start:var(--spacing-100);
-          padding-inline-start:var(--spacing-100);
+  padding-inline-end:var(--spacing-200);
+  padding-inline-start:var(--spacing-100);
   padding-top:var(--spacing-100);
   position:relative;
 }
@@ -1581,8 +1578,7 @@ button.chip__button>svg{
 }
 
 .chips-combobox .combobox{
-  -webkit-margin-start:calc(var(--spacing-100)*-1);
-          margin-inline-start:calc(var(--spacing-100)*-1);
+  margin-inline-start:calc(var(--spacing-100)*-1);
   width:calc(100% + var(--spacing-300));
 }
 
@@ -1690,8 +1686,7 @@ span.combobox{
 }
 
 .combobox__control>button,.combobox__control>svg.icon{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 
 .combobox__option[role^=option]{
@@ -2006,6 +2001,11 @@ a.cta-btn{
 a.cta-btn--fixed-height,a.cta-btn--truncated{
   height:40px;
 }
+a.cta-btn:focus-visible{
+  outline-offset:var(--spacing-25);
+  outline-style:solid;
+  outline-width:var(--spacing-25);
+}
 a.cta-btn:focus:not(:focus-visible){
   outline:none;
 }
@@ -2058,12 +2058,10 @@ a.cta-btn svg.icon{
   width:10px;
 }
 a.cta-btn svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 a.cta-btn svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 a.cta-btn svg.icon:only-child{
   margin:0;
@@ -2159,8 +2157,7 @@ summary.details__summary--small{
 }
 
 span.details__icon{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 span.details__icon[hidden]{
   display:inline-flex;
@@ -2295,8 +2292,7 @@ details.details summary:focus:not(:focus-visible){
   overflow-wrap:anywhere;
 }
 .drawer-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .drawer-dialog__header .fake-link{
@@ -2444,8 +2440,7 @@ button.icon-btn.drawer-dialog__close{
   font-weight:700;
   line-height:1.5em;
   margin:0;
-  -webkit-margin-start:var(--spacing-150);
-          margin-inline-start:var(--spacing-150);
+  margin-inline-start:var(--spacing-150);
 }
 
 .education-notice__main{
@@ -2453,8 +2448,7 @@ button.icon-btn.drawer-dialog__close{
 }
 
 .education-notice__dismiss{
-  -webkit-margin-start:var(--spacing-150);
-          margin-inline-start:var(--spacing-150);
+  margin-inline-start:var(--spacing-150);
 }
 
 .education-notice button.icon-btn{
@@ -2613,7 +2607,7 @@ button.icon-btn.drawer-dialog__close{
 .eek__rating-range>span{
   font-size:8px;
 }
-@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){
+@media not all and (-webkit-min-device-pixel-ratio:0),not all and (resolution >= 0.001dpcm){
   @supports (-webkit-appearance:none){
     .eek__rating{
       text-shadow:none;
@@ -2654,8 +2648,7 @@ div.field--table{
 }
 
 .field__description--group>:last-child{
-  -webkit-margin-start:5px;
-          margin-inline-start:5px;
+  margin-inline-start:5px;
   text-align:right;
 }
 
@@ -2763,6 +2756,311 @@ div.field__description{
 [dir=rtl] .field__description--group>:last-child{
   text-align:left;
 }
+.file-preview-card{
+  aspect-ratio:1/1;
+  background-color:var(--file-preview-card-background-color, var(--color-background-secondary));
+  border-radius:var(--file-preview-card-border-radius, var(--border-radius-100));
+  box-sizing:border-box;
+  display:grid;
+  grid-template-areas:" . . menu-action " " . center-action . " " label . . ";
+  grid-template-columns:repeat(3, 1fr);
+  grid-template-rows:repeat(3, 1fr);
+  height:100%;
+  max-width:396px;
+  min-width:120px;
+  width:100%;
+}
+
+.file-preview-card__body{
+  align-items:center;
+  display:flex;
+  grid-area:1/1/4/4;
+  justify-content:center;
+}
+
+.file-preview-card__body img,.file-preview-card__body video{
+  border-radius:var(--file-preview-card-border-radius, var(--border-radius-100));
+  height:100%;
+  object-fit:contain;
+  width:100%;
+}
+
+.file-preview-card__body--fade{
+  opacity:.5;
+}
+
+.file-preview-card__document-icon.icon{
+  height:40%;
+  width:40%;
+}
+
+.file-preview-card .file-preview-card__menu-action{
+  grid-area:menu-action;
+  justify-self:end;
+  z-index:1;
+}
+
+.file-preview-card .file-preview-card__menu-action .icon-btn{
+  height:var(--spacing-400);
+  margin:var(--spacing-100);
+  width:var(--spacing-400);
+}
+
+.file-preview-card .file-preview-card__menu-action .icon-btn:not(:hover){
+  background-color:var(--file-preview-card-menu-action-background-color, var(--color-background-primary));
+}
+
+.file-preview-card__preview-action{
+  align-self:end;
+  grid-area:label;
+  z-index:1;
+}
+
+.file-preview-card__preview-action .icon-btn{
+  align-items:center;
+  background-color:var(--file-preview-card-label-background-color, var(--color-background-primary));
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-50);
+  height:var(--spacing-250);
+  margin:var(--spacing-100);
+  padding:var(--spacing-25) var(--spacing-100);
+  width:max-content;
+}
+
+.file-preview-card__preview-action-text{
+  color:var(--file-preview-card-label-text-color, var(--color-foreground-primary));
+  font-size:var(--font-size-12);
+  font-weight:400;
+}
+
+.file-preview-card__video-icon.icon{
+  height:var(--spacing-150);
+  width:var(--spacing-150);
+}
+
+.file-preview-card__body-action{
+  align-self:center;
+  grid-area:center-action;
+  justify-self:center;
+  z-index:1;
+}
+
+.file-preview-card__body-action .icon-btn{
+  aspect-ratio:1/1;
+  background-color:rgba(var(--file-preview-card-center-action-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  color:var(--file-preview-card-center-action-color, var(--color-foreground-on-strong));
+  font-size:var(--font-size-14);
+  font-weight:700;
+  height:-moz-fit-content;
+  height:fit-content;
+  line-height:var(--spacing-250);
+  padding:var(--spacing-100);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.file-preview-card__body-action .icon-btn:active,.file-preview-card__body-action .icon-btn:focus,.file-preview-card__body-action .icon-btn:hover{
+  color:var(--file-preview-card-center-action-interactive-color, var(--color-foreground-primary));
+}
+
+.file-preview-card__body-action .icon-btn:focus,.file-preview-card__body-action .icon-btn:hover{
+  background-color:rgba(var(--file-preview-card-center-action-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+}
+
+.file-preview-card__body-action .icon-btn:active{
+  background-color:rgba(var(--file-preview-card-center-action-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+}
+div.file-preview-card-group{
+  container:file-preview-cards-container/inline-size;
+}
+
+div.file-preview-card-group ul{
+  display:grid;
+  gap:var(--spacing-100);
+  grid-template-columns:repeat(2, 1fr);
+  list-style:none;
+  margin:0;
+  padding:0;
+  width:100%;
+}
+
+div.file-preview-card-group ul li{
+  height:max-content;
+}
+
+@supports not (contain:inline-size){
+  @media (min-width:512px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-100);
+      grid-template-columns:repeat(4, 1fr);
+    }
+  }
+  @media (min-width:768px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(5, 1fr);
+    }
+  }
+  @media (min-width:1024px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(7, 1fr);
+    }
+  }
+  @media (min-width:1280px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(9, 1fr);
+    }
+  }
+  @media (min-width:1440px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(10, 1fr);
+    }
+  }
+  @media (min-width:1680px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(12, 1fr);
+    }
+  }
+  @media (min-width:1920px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(14, 1fr);
+    }
+  }
+}
+@container file-preview-cards-container (inline-size >= 512px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-100);
+    grid-template-columns:repeat(4, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 768px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(5, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1024px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(7, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1280px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(9, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1440px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(10, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1680px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(12, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1920px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(14, 1fr);
+  }
+}
+div.file-input{
+  display:grid;
+  grid-template-areas:"center";
+  grid-template-columns:1fr;
+  grid-template-rows:1fr;
+}
+
+div.file-input__container,input.file-input__input[type=file]{
+  border-radius:var(--file-input-border-radius, var(--border-radius-100));
+  grid-area:center;
+}
+
+div.file-input__container{
+  background-color:var(--file-input-background-color, var(--color-background-secondary));
+  border:1px dashed;
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-100);
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  padding:var(--spacing-200);
+  pointer-events:none;
+  z-index:1;
+}
+
+div.file-input___container--dragged-over{
+  background-color:var(--file-input-dragged-over-background-color, var(--color-background-tertiary));
+}
+
+div.file-input__upload-icon{
+  align-self:center;
+  background-color:var(--file-input-upload-icon-background-color, var(--color-background-primary));
+  border-radius:99px;
+  padding:var(--spacing-150);
+}
+
+div.file-input__upload-icon svg{
+  fill:var(--file-input-upload-icon-fill, var(--color-foreground-primary));
+  height:var(--spacing-300);
+  width:var(--spacing-300);
+}
+
+div.file-input__content{
+  align-items:start;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  justify-content:center;
+}
+
+.file-input__content-header{
+  color:var(--file-input-content-header-color, var(--color-foreground-primary));
+  font-size:var(--font-size-14);
+  font-weight:700;
+  line-height:var(--spacing-250);
+  margin-block:0 var(--spacing-50);
+}
+
+span.file-input__content-subheader{
+  color:var(--file-input-content-subheader-color, var(--color-foreground-secondary));
+  font-size:var(--font-size-12);
+  font-weight:400;
+  line-height:var(--spacing-200);
+  margin-block-end:var(--spacing-100);
+}
+
+span.file-input__content-cta{
+  text-decoration-line:underline;
+}
+
+@media screen and (min-width:768px){
+  div.file-input__container{
+    gap:var(--spacing-300);
+  }
+  div.file-input__container,div.file-input__upload-icon{
+    padding:var(--spacing-300);
+  }
+  .file-input__content-header{
+    font-size:var(--font-size-16);
+    line-height:var(--spacing-300);
+  }
+  span.file-input__content-subheader{
+    font-size:var(--font-size-14);
+    line-height:var(--spacing-250);
+  }
+}
 
 a.filter-link,button.filter-button{
   align-items:center;
@@ -2907,9 +3205,8 @@ span.filter-menu-form__item,span.filter-menu__item[role^=menuitem]{
 button.filter-menu-form__footer[type=submit],button.filter-menu__footer{
   background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
   border:none;
+  border-top:1px solid;
   border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
-  border-top-style:solid;
-  border-top-width:1px;
   bottom:0;
   box-sizing:border-box;
   color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -3009,8 +3306,7 @@ button.filter-menu-button__button:active,button.filter-menu-button__button:focus
 .filter-menu-button__button-cell svg.icon--12{
   align-self:center;
   color:var(--filter-menu-button-icon-color, var(--color-foreground-primary));
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 
 .filter-menu-button__button-text{
@@ -3168,9 +3464,8 @@ span.filter-menu-button__item{
 button.filter-menu-button__footer{
   background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
   border:none;
+  border-top:1px solid;
   border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
-  border-top-style:solid;
-  border-top-width:1px;
   bottom:0;
   box-sizing:border-box;
   color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -4410,8 +4705,7 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   overflow-wrap:anywhere;
 }
 .fullscreen-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .fullscreen-dialog__header .fake-link{
@@ -4676,12 +4970,7 @@ a.icon-link.icon-link--large,button.icon-btn.icon-btn--large{
   height:48px;
   width:48px;
 }
-
-a.icon-link--transparent,button.icon-btn--transparent{
-  background-color:initial;
-  outline-offset:-10px;
-}
-a.icon-link--transparent:active,a.icon-link--transparent:focus,a.icon-link--transparent:hover,button.icon-btn--transparent:active,button.icon-btn--transparent:focus,button.icon-btn--transparent:hover{
+a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparent:focus,a.icon-link--transparent:hover,button.icon-btn--transparent,button.icon-btn--transparent:active,button.icon-btn--transparent:focus,button.icon-btn--transparent:hover{
   background-color:initial;
 }
 
@@ -4971,8 +5260,7 @@ span.inline-notice{
 
 .inline-notice__header{
   display:flex;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
   margin-top:var(--spacing-50);
 }
 
@@ -5033,8 +5321,7 @@ span.inline-notice{
   overflow-wrap:anywhere;
 }
 .lightbox-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .lightbox-dialog__main{
@@ -5053,6 +5340,7 @@ span.inline-notice{
 }
 
 .lightbox-dialog__footer{
+  border-top:1px solid var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
   display:flex;
   flex-direction:column;
   justify-content:center;
@@ -5099,8 +5387,7 @@ button.icon-btn.lightbox-dialog__close,button.icon-btn.lightbox-dialog__prev{
 }
 
 button.icon-btn.lightbox-dialog__prev{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev{
@@ -5230,7 +5517,6 @@ button.icon-btn.lightbox-dialog__prev{
   .lightbox-dialog__window .lightbox-dialog__footer{
     flex-direction:row;
     justify-content:flex-end;
-    padding:0 var(--spacing-200) var(--spacing-200);
   }
   .lightbox-dialog__window .lightbox-dialog__footer>:not(:first-child){
     margin-left:var(--spacing-100);
@@ -5367,8 +5653,7 @@ div.listbox__option svg.icon{
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -5506,8 +5791,7 @@ div.listbox-button__listbox{
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox-button__option[role=option][aria-selected=true] svg.icon{
@@ -6088,8 +6372,7 @@ span[role=region].page-notice{
 
 .page-notice__header,.page-notice__main{
   grid-row:1;
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .page-notice__main{
@@ -6187,13 +6470,11 @@ a.pagination__next,a.pagination__previous,button.pagination__next,button.paginat
 }
 
 a.pagination__next,button.pagination__next{
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 a.pagination__previous,button.pagination__previous{
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 
 .pagination__item{
@@ -6328,8 +6609,7 @@ nav.pagination--fluid ol.pagination__items li{
   overflow-wrap:anywhere;
 }
 .panel-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .panel-dialog__header .fake-link{
@@ -6442,8 +6722,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input button.btn svg.icon:last-child{
-  -webkit-margin-start:var(--spacing-50);
-          margin-inline-start:var(--spacing-50);
+  margin-inline-start:var(--spacing-50);
 }
 
 .phone-input .listbox-button span.fflag,.phone-input .listbox-button svg.flag{
@@ -6455,12 +6734,10 @@ button.icon-btn.panel-dialog__close{
   display:inline-flex;
 }
 .phone-input .listbox-button__value svg,.phone-input .listbox__value svg{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 .phone-input .listbox-button__value span,.phone-input .listbox__value span{
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 .phone-input .listbox-button__value span:last-child,.phone-input .listbox__value span:last-child{
   color:var(--color-foreground-secondary);
@@ -6979,15 +7256,13 @@ hr.progress-stepper__separator{
 
 .progress-stepper__item:first-child .progress-stepper__text{
   align-self:flex-start;
-  -webkit-margin-start:var(--spacing-50);
-          margin-inline-start:var(--spacing-50);
+  margin-inline-start:var(--spacing-50);
   text-align:left;
 }
 
 .progress-stepper__item:last-child .progress-stepper__text{
   align-self:flex-end;
-  -webkit-margin-end:var(--spacing-50);
-          margin-inline-end:var(--spacing-50);
+  margin-inline-end:var(--spacing-50);
   text-align:right;
 }
 
@@ -7013,8 +7288,7 @@ hr.progress-stepper__separator{
 
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text{
   align-self:center;
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
   margin-top:0;
   text-align:left;
   white-space:nowrap;
@@ -7217,19 +7491,16 @@ span[role=region].section-notice{
 
 .section-notice__header{
   grid-column:1;
+  grid-row:1;
   height:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
   margin-top:1px;
 }
 
-.section-notice__header,.section-notice__main{
-  grid-row:1;
-  -webkit-margin-end:var(--spacing-200);
-}
-
 .section-notice__main{
   grid-column:1 /  3;
-          margin-inline-end:var(--spacing-200);
+  grid-row:1;
+  margin-inline-end:var(--spacing-200);
 }
 
 .section-notice__header+.section-notice__main{
@@ -7320,8 +7591,7 @@ p.section-notice__cta{
 .section-title__title svg.icon{
   background-color:var(--color-background-secondary);
   border-radius:12px;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
   padding:7px;
 }
 
@@ -7405,8 +7675,7 @@ p.section-notice__cta{
 }
 
 .segmented-buttons>ul>li:not(:first-child){
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 .segmented-buttons__button{
@@ -7435,12 +7704,10 @@ p.section-notice__cta{
   align-self:center;
 }
 .segmented-buttons__button svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 .segmented-buttons__button svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 .segmented-buttons__button svg.icon:only-child{
   margin:0;
@@ -7656,13 +7923,11 @@ span.skeleton__avatar,span.skeleton__button,span.skeleton__image,span.skeleton__
 }
 
 span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),span.skeleton__image:not(:last-child),span.skeleton__text:not(:last-child),span.skeleton__textbox:not(:last-child){
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
-  -webkit-margin-after:var(--spacing-150);
-          margin-block-end:var(--spacing-150);
+  margin-block-end:var(--spacing-150);
 }
 .skeleton--elevated{
   --skeleton-background:var(--color-loading-fill-elevated);
@@ -7775,8 +8040,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 }
 
 .snackbar-dialog__main{
-  -webkit-margin-end:var(--spacing-400);
-          margin-inline-end:var(--spacing-400);
+  margin-inline-end:var(--spacing-400);
 }
 
 .snackbar-dialog__main p{
@@ -7784,8 +8048,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 }
 
 .snackbar-dialog__actions{
-  -webkit-margin-start:auto;
-          margin-inline-start:auto;
+  margin-inline-start:auto;
 }
 
 .snackbar-dialog__window--column .snackbar-dialog__actions{
@@ -8041,12 +8304,6 @@ span.switch__control:focus:not(:focus-visible){
     opacity:1;
   }
 }
-:root{
-  --density-compact-cell-height:36px;
-  --density-default-cell-height:48px;
-  --density-relaxed-cell-height:56px;
-}
-
 .table{
   overflow-x:auto;
   position:relative;
@@ -8062,41 +8319,201 @@ span.switch__control:focus:not(:focus-visible){
   background-color:var(--color-background-primary);
   border-bottom:1px solid var(--color-stroke-subtle);
   box-sizing:border-box;
-  height:var(--density-default-cell-height);
+  height:80px;
+  max-height:80px;
   max-width:400px;
   min-width:124px;
-  padding-block:var(--spacing-100);
-  padding-inline:var(--spacing-200);
+  padding:12px;
 }
 
+.table th{
+  white-space:nowrap;
+}
+
+.table--density-compact td,.table--density-compact th{
+  height:64px;
+  max-height:64px;
+  padding:12px;
+}
+
+.table--density-relaxed td,.table--density-relaxed th{
+  height:112px;
+  max-height:112px;
+  padding:16px;
+}
+
+.table th button{
+  font-weight:700;
+}
+
+.table tbody tr:last-child td,.table tbody tr:last-child th{
+  border-bottom:none;
+}
+
+.table-cell{
+  text-align:left;
+}
+
+.table-cell--numeric{
+  text-align:right;
+}
 .table__cell{
   text-align:left;
 }
 
-.table [data-type=numeric],.table__cell--numeric{
+.table__cell--numeric{
   text-align:right;
 }
 
-.table td:last-child,.table th:last-child{
-  -webkit-padding-end:0;
-          padding-inline-end:0;
+.table-cell--icon-action{
+  text-align:center;
+  width:64px;
 }
 
-.table--density-compact td,.table--density-compact th{
-  height:var(--density-compact-cell-height);
+.table [data-type=numeric]{
+  text-align:right;
 }
 
-.table--density-relaxed td,.table--density-relaxed th{
-  height:var(--density-relaxed-cell-height);
+.table-cell img{
+  max-height:56px;
+  max-width:56px;
+}
+
+.table--density-compact .table-cell img{
+  max-height:40px;
+  max-width:40px;
+}
+
+.table--density-relaxed .table-cell img{
+  max-height:72px;
+  max-width:72px;
+}
+
+.table th[scope=row]{
+  text-align:left;
+}
+
+.table td:last-child,.table th:last-child{
+  padding-inline-end:0;
 }
 
 .table--mode-selection td:first-child,.table--mode-selection th:first-child{
-  min-width:unset;
+  min-width:48px;
+  text-align:center;
+  width:48px;
 }
 
 .table tbody th{
   font-weight:400;
 }
+
+.table thead button{
+  background-color:initial;
+  border:1px solid transparent;
+  border-radius:10px;
+  box-sizing:border-box;
+  color:inherit;
+  display:inline-block;
+  font-family:inherit;
+  font-size:var(--font-size-default);
+  margin:0;
+  min-height:40px;
+  min-width:auto;
+  padding:3px;
+  text-align:center;
+  text-decoration:none;
+  transform:translateZ(0);
+  vertical-align:initial;
+  white-space:nowrap;
+}
+
+.table-cell__data{
+  line-height:var(--spacing-250);
+  max-width:400px;
+  min-width:124px;
+}
+
+.table-cell__data--secondary{
+  color:var(--color-foreground-secondary);
+  font-size:var(--font-size-12);
+  line-height:var(--spacing-200);
+}
+
+.table-cell__thumbnail{
+  align-items:center;
+  background-color:var(--color-background-tertiary);
+  border-radius:8px;
+  display:flex;
+  flex-wrap:nowrap;
+  height:56px;
+  justify-content:center;
+  overflow:hidden;
+  text-align:center;
+  width:56px;
+}
+
+.table--density-compact .table-cell__thumbnail{
+  border-radius:4px;
+  height:40px;
+  width:40px;
+}
+
+.table--density-relaxed .table-cell__thumbnail{
+  border-radius:8px;
+  height:72px;
+  width:72px;
+}
+
+.table-cell__layout{
+  align-items:center;
+  display:flex;
+  gap:var(--spacing-200);
+  width:max-content;
+}
+
+.table-cell__layout>*{
+  flex-shrink:0;
+}
+
+.table-cell__multiline{
+  max-height:80px;
+  max-width:304px;
+}
+
+.table--density-compact .table-cell__multiline{
+  max-height:64px;
+  max-width:320px;
+}
+
+.table--density-relaxed .table-cell__multiline{
+  max-height:112px;
+  max-width:272px;
+}
+
+.table-cell__layout .table-cell__multiline .table-cell__data{
+  margin-block-end:var(--spacing-50);
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.table-cell .textbox,.table-cell .textbox__control{
+  width:100%;
+}
+
+.table-cell--numeric .textbox__control{
+  text-align:right;
+}
+
+.table-cell .signal{
+  white-space:nowrap;
+}
+[dir=rtl] .table th[scope=row],[dir=rtl] .table-cell{
+  text-align:right;
+}
+[dir=rtl] .table-cell--numeric{
+  text-align:left;
+}
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -8126,8 +8543,7 @@ div.tabs__item[role=tab],li.fake-tabs__item{
   -webkit-tap-highlight-color:var(--color-background-secondary);
 }
 div.tabs__item[role=tab]:not(:last-child),li.fake-tabs__item:not(:last-child){
-  -webkit-margin-end:var(--spacing-450);
-          margin-inline-end:var(--spacing-450);
+  margin-inline-end:var(--spacing-450);
 }
 
 li.fake-tabs__item>a{
@@ -8240,13 +8656,11 @@ input.textbox__control{
 }
 
 input.textbox__control:first-child:not([readonly]){
-  -webkit-padding-start:var(--spacing-200);
-          padding-inline-start:var(--spacing-200);
+  padding-inline-start:var(--spacing-200);
 }
 
 input.textbox__control:last-child:not([readonly]){
-  -webkit-padding-end:var(--spacing-200);
-          padding-inline-end:var(--spacing-200);
+  padding-inline-end:var(--spacing-200);
 }
 
 input.textbox__control,textarea.textbox__control{
@@ -8292,30 +8706,26 @@ input.textbox__control{
 .textbox .icon-btn>svg,.textbox>svg{
   color:var(--textbox-icon-color, var(--color-foreground-secondary));
   display:inline-flex;
-  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
   height:1lh;
   pointer-events:none;
   width:14px;
+  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .textbox>span:last-child,.textbox>svg:last-child{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .textbox .icon-btn:last-child{
-  -webkit-margin-start:calc(var(--spacing-100)*-1);
-          margin-inline-start:calc(var(--spacing-100)*-1);
+  margin-inline-start:calc(var(--spacing-100)*-1);
 }
 
 .textbox .icon-btn:first-child{
-  -webkit-margin-end:calc(var(--spacing-100)*-1);
-          margin-inline-end:calc(var(--spacing-100)*-1);
+  margin-inline-end:calc(var(--spacing-100)*-1);
 }
 
 input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus{
@@ -8386,13 +8796,11 @@ button.toast-dialog__close{
   border:0;
   color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
   flex-shrink:0;
-  -webkit-margin-start:auto;
-          margin-inline-start:auto;
-  outline-offset:calc(var(--spacing-100)*-1);
+  margin-inline-start:auto;
   padding:0;
 }
 button.toast-dialog__close:focus{
-  outline:1px dashed white;
+  outline:2px solid var(--color-foreground-on-information);
 }
 button.toast-dialog__close:focus,button.toast-dialog__close:hover{
   color:var(--color-state-primary-hover);
@@ -8423,11 +8831,10 @@ button.toast-dialog__close>svg{
   background-color:initial;
   color:var(--toast-dialog-foreground-color, var(--color-background-primary));
   font-weight:700;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 .toast-dialog__footer button.btn--primary:focus,.toast-dialog__footer button.btn--secondary:focus{
-  outline:1px dashed var(--color-foreground-on-information);
+  outline:2px solid var(--color-foreground-on-information);
 }
 .toast-dialog__footer button.btn--primary:not([disabled]):focus,.toast-dialog__footer button.btn--primary:not([disabled]):hover{
   background-color:var(--color-state-primary-hover);
@@ -9458,8 +9865,8 @@ span.tourtip{
 }
 
 .tourtip__mask{
-  background-color:var(--tourtip-background-color, var(--color-background-elevated));
-  color:var(--tourtip-foreground-color, var(--color-foreground-primary));
+  background-color:var(--tourtip-background-color, var(--color-background-inverse));
+  color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
   position:relative;
 }
 
@@ -9474,7 +9881,7 @@ span.tourtip__mask{
   word-break:break-word;
 }
 .tourtip__cell a{
-  color:var(--tourtip-foreground-color, var(--color-foreground-primary));
+  color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tourtip__cell a:focus{
   outline:1px dashed currentColor;
@@ -9503,9 +9910,12 @@ button.tourtip__close{
   white-space:nowrap;
   width:32px;
 }
+button.tourtip__close svg.icon{
+  fill:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
+}
 
 .tourtip__pointer{
-  background-color:var(--tourtip-background-color, var(--color-background-elevated));
+  background-color:var(--tourtip-background-color, var(--color-background-inverse));
   height:8px;
   position:absolute;
   transform:rotate(45deg);
@@ -9601,19 +10011,23 @@ button.tourtip__close{
   width:100%;
 }
 
+.tourtip__footer>button.btn--primary{
+  background-color:var(--tourtip-background-color, var(--color-foreground-on-inverse));
+  color:var(--tourtip-foreground-color, var(--color-background-inverse));
+}
+
 .tourtip__footer>a:not(:last-child),.tourtip__footer>button:not(:last-child){
-  margin-right:8px;
+  margin-right:var(--spacing-200);
 }
 .tourtip__footer>.fake-link,.tourtip__footer>a{
-  color:var(--color-foreground-primary);
+  color:var(--color-foreground-on-inverse);
   text-decoration:none;
 }
 .tourtip__footer>.fake-link:hover:not(:disabled),.tourtip__footer>a:hover:not(:disabled){
-  color:var(--color-foreground-primary);
+  color:var(--color-foreground-on-inverse);
   text-decoration:underline;
 }
 .tourtip__index{
-  color:var(--tourtip-index-color, var(--color-foreground-secondary));
   flex:1;
 }
 
@@ -9767,8 +10181,7 @@ button.tourtip__close{
 }
 
 .video-player__report-button>svg{
-  -webkit-margin-end:var(--spacing-50);
-          margin-inline-end:var(--spacing-50);
+  margin-inline-end:var(--spacing-50);
 }
 
 .video-player .shaka-overflow-menu svg{