/* Four Color Comic v40.30.7 — grading paint stability + native-like centered zoom follow-up. */

/*
 * Grading occasionally produced a giant yellow compositor rectangle in Chromium.
 * Keep this tab on simple paint paths: isolate it, clip descendant paint to its own box,
 * and remove GPU-heavy effects that are unnecessary for the grading workflow.
 */
body[data-fcc-tab="grading"] #grading{
  position:relative!important;
  isolation:isolate!important;
  contain:paint!important;
}
body[data-fcc-tab="grading"] #grading,
body[data-fcc-tab="grading"] #grading *{
  will-change:auto!important;
  filter:none!important;
  -webkit-filter:none!important;
}
body[data-fcc-tab="grading"] #grading .v39-priority,
body[data-fcc-tab="grading"] #grading .panel,
body[data-fcc-tab="grading"] #grading .bookcard,
body[data-fcc-tab="grading"] #grading .v39-roi-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-fcc-tab="grading"] #grading *::before,
body[data-fcc-tab="grading"] #grading *::after{
  will-change:auto!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  clip-path:none!important;
}

/* The old Discover starburst was the only large solid-yellow clipped surface in the app.
   Replace it with a non-composited comic fact badge so a hidden tab cannot leak a GPU layer. */
.fcc-discover-burst{
  clip-path:none!important;
  transform:none!important;
  width:min(300px,100%)!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  border:2px solid var(--fcc-yellow)!important;
  background:radial-gradient(circle at 50% 42%,rgba(255,210,28,.13),rgba(255,210,28,.035) 62%,transparent 63%)!important;
  color:var(--fcc-yellow)!important;
  box-shadow:inset 0 0 0 8px rgba(255,210,28,.035)!important;
  overflow:hidden!important;
  contain:paint!important;
}

/* Zoom remains a toggle, but the control says only Zoom and the scaled page stays centered. */
.fcc-zoom-action{min-width:76px!important}
body.fcc-zoom-125{overflow-x:hidden!important}
body.fcc-zoom-125 .app{
  zoom:1.25!important;
  width:80%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.fcc-zoom-125 .topbar,
body.fcc-zoom-125 .content{
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:760px){
  .fcc-nav-row>.fcc-zoom-action{min-width:76px!important}
}