/* Flat buttons across themes, including native injected UI. */
html body button,html body a.primary{
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;
  border-style:solid!important;
}
html[data-test-theme]{--lab-action:var(--lab-accent)!important;--lab-action-shadow:none!important;--lab-danger:#b43b42!important;--lab-danger-shadow:none!important}

/* Header and listening panel share the song list's actual content boundaries. */
html[data-test-theme=gallery-white] body #application{
  padding-top:calc(var(--gallery-header-height,66px) + var(--gallery-controller-height,50px) + 12px)!important;
}
html[data-test-theme=gallery-white] body #application>header,
html[data-test-theme=gallery-white] body #controller{
  position:fixed!important;left:var(--gallery-content-left,14px)!important;
  transform:none!important;width:var(--gallery-content-width,calc(100% - 28px))!important;
  max-width:none!important;box-sizing:border-box!important;margin:0!important;
  background:var(--lab-panel)!important;background-image:none!important;
  border:1px solid var(--lab-border)!important;box-shadow:none!important;backdrop-filter:none!important;
}
html[data-test-theme=gallery-white] body #application>header{
  top:0!important;z-index:1000!important;border-bottom:0!important;
  border-radius:0!important;padding:10px 12px!important;
}
html[data-test-theme=gallery-white] body #controller{
  top:var(--gallery-header-height,66px)!important;z-index:999!important;
  border-top:0!important;border-radius:0!important;
  padding:5px 12px 8px!important;
}
html[data-test-theme=gallery-white] body #controller .listener-line{
  display:flex!important;flex-wrap:wrap!important;white-space:normal!important;
  justify-content:flex-start!important;align-items:baseline!important;gap:4px!important;
  overflow-wrap:anywhere;font-size:11px;
}
html[data-test-theme=gallery-white] body #controller :is(.progress,.heard-next-sample){
  width:100%!important;margin:12px 0!important;height:3px!important;border-radius:0!important;
}
html[data-test-theme=gallery-white] body #controller .progress i{background:var(--lab-accent)!important}
html[data-test-theme=gallery-white] body .history{
  border-color:var(--lab-border)!important;background:var(--lab-panel)!important;box-shadow:none!important;
}
@media(max-width:420px){html[data-test-theme=gallery-white] body #application>header{padding:8px!important}}

/* Square surfaces and flat fills; artwork retains its theme-specific crop. */
html,html[data-test-theme]{
  --lab-radius:0px!important;--lab-control-radius:0px!important;
  --lab-round-radius:0px!important;--lab-dialog-radius:0px!important;
  --lab-shadow:none!important;--lab-action-shadow:none!important;--lab-danger-shadow:none!important;
  --lab-panel-gradient:var(--lab-panel)!important;
}
html body :is(button,a,input,select,textarea,dialog,header,section,article,fieldset,
  .history,.row,.swipe-shell,.controller,.heard-more-panel,.theme-lab-control,
  .song-dialog-location,.share-scope,.configuration-layout,.configuration-section-menu,
  .configuration-section-content,.heard-configuration-lock-notice){
  border-radius:0!important;box-shadow:none!important;text-shadow:none!important;
  background-image:none!important;
}
html body #application :is(button,.row,.swipe-shell,.history),
html body dialog :is(button,a,input,select,textarea,fieldset),
html body #application>header,html body #controller{
  border-radius:0!important;box-shadow:none!important;text-shadow:none!important;
}
html body #controller :is(.progress,.heard-next-sample),
html[data-test-theme] body #controller :is(.progress,.heard-next-sample),
html[data-heard-docked] body #controller :is(.progress,.heard-next-sample){
  margin:12px 0!important;min-height:4px;height:4px!important;
  border-radius:0!important;box-shadow:none!important;
}

/* Icon buttons stay circular and flat in every theme and window layout. */
html body #application>header nav button:is(.round,.header-listen){
  border-radius:50%!important;aspect-ratio:1;flex-shrink:0;
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  box-shadow:none!important;background-image:none!important;
}
/* Artwork has a clean edge rather than a theme-generated shadow or rim. */
html body #application .cover,html body dialog :is(.cover,.song-artwork,.song-dialog-artwork),
html body :is(.album-art,.artwork){
  box-shadow:none!important;filter:none!important;border:0!important;outline:0!important;
  background:#fff!important;
}
@media(max-width:420px){html body #application>header nav button:is(.round,.header-listen){width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}}
@media(max-width:360px){html body #application>header nav button:is(.round,.header-listen){width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}}
html body #controller .progress>i,
html[data-test-theme] body #controller .progress>i{
  background:#2eaa68!important;background-image:none!important;
}
/* Push the controls right while keeping the permanent spinner slot beyond them. */
html body #application>header nav{
  margin-inline-start:auto!important;justify-content:flex-end!important;
}

/* Quiet circular delete controls, with clear hover and keyboard focus states. */
html body #application .swipe-shell>.delete-action{
  border-radius:50%!important;border:1px solid color-mix(in srgb,var(--lab-muted,#86a394) 22%,transparent)!important;
  background:transparent!important;box-shadow:none!important;
}
html body #application .swipe-shell>.delete-action:hover{
  border-color:color-mix(in srgb,var(--lab-muted,#86a394) 55%,transparent)!important;
  background:transparent!important;
}
/* Modal activity occupies a dedicated right-hand slot, outside the controls. */
html body dialog .dialog-head{
  position:relative;padding-inline-end:28px!important;justify-content:flex-end!important;
}
html body dialog .dialog-head>:first-child:not(button):not(.heard-cloud-spinner){
  margin-inline-end:auto!important;min-width:0;overflow-wrap:anywhere;
}
html body dialog .dialog-head>button{flex-shrink:0}
html body dialog .dialog-head>.heard-cloud-spinner{
  position:absolute;right:0;top:8px;margin:0;box-sizing:content-box;
}
html body dialog .dialog-head>.heard-cloud-spinner[hidden]{
  display:inline-block!important;visibility:hidden;animation:none;
}
/* A photo column appears only when the history panel can accommodate it. */
html body #application .history{container-type:inline-size;container-name:heard-history}
html body #application .row .photo-strip{display:none!important}
html body #application .row .photo-icon-slot{display:block!important}
html body #application .row .photo-thumbnails{
  overflow:visible;min-height:0;padding:6px!important;gap:5px;
  border:1px solid color-mix(in srgb,var(--lab-muted,#86a394) 10%,transparent)!important;
  border-radius:4px!important;background:transparent!important;box-shadow:none!important;
}
html body #application .row .photo-thumbnails .photo-thumb{
  flex:0 0 48px;width:48px;height:48px;border-radius:3px!important;
}
html body #application .row .photo-thumbnails .photo-thumb img{border-radius:2px}
html body #application .row .photo-thumbnails .photo-more{
  flex:0 0 28px;width:28px;font-size:20px;letter-spacing:0;
}
@container heard-history (min-width:640px){
  html:not([data-heard-docked]) body #application .row:has(>.photo-strip:not([hidden])){
    grid-template-columns:auto minmax(160px,1fr) auto!important;
    grid-template-rows:auto auto!important;column-gap:12px!important;row-gap:4px!important;
  }
  html:not([data-heard-docked]) body #application .row:has(>.photo-strip:not([hidden]))>.cover{
    grid-column:1!important;grid-row:1/span 2!important;align-self:center!important;
  }
  html:not([data-heard-docked]) body #application .row:has(>.photo-strip:not([hidden]))>.copy{
    grid-column:2!important;grid-row:1!important;align-self:end!important;
  }
  html:not([data-heard-docked]) body #application .row:has(>.photo-strip:not([hidden]))>.row-meta{
    grid-column:2!important;grid-row:2!important;align-self:start!important;
    width:auto!important;max-width:none!important;align-items:flex-start!important;
  }
  html:not([data-heard-docked]) body #application .row .photo-strip:not([hidden]){
    display:block!important;grid-column:3!important;grid-row:1/span 2!important;
    align-self:center!important;justify-self:end!important;padding:0!important;
  }
  html:not([data-heard-docked]) body #application .row .photo-icon-slot{display:none!important}
}

/* Icon controls have flat faces, without a raised rim. Focus outlines remain. */
html body #application>header nav button:is(.round,.header-listen),
html body #application button.photo-icon,
html body dialog button:is(.round,.share-link-copy){
  border-color:transparent!important;box-shadow:none!important;
  background-image:none!important;filter:none!important;
}
/* Artwork and photo edges are deliberately quieter than other UI borders. */
html body #application .cover,
html body dialog :is(.cover,.song-artwork,.song-dialog-artwork),
html body :is(.album-art,.artwork),
html body #application .row .photo-thumbnails .photo-thumb,
html body dialog :is(.photo-thumb,.song-nearby-photo-open){
  border:1px solid color-mix(in srgb,var(--lab-muted,#86a394) 10%,transparent)!important;
  box-shadow:none!important;
}